• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Two Column Responsive Form

Two Column Responsive Form 11 years 11 months ago #23098

Does anyone have a solution for a two column responsive form?
The administrator has disabled public write access.

Two Column Responsive Form 11 years 6 months ago #25202

  • info4683
  • info4683's Avatar
  • OFFLINE
  • Junior Boarder
  • Posts: 33
  • Thank you received: 1
For me too please ;-)
Kaum macht man etwas richtig, schon klappt´s..
The administrator has disabled public write access.

Two Column Responsive Form 11 years 6 months ago #25333

Oh, that would be perfect.
Also I cannot edit the responsive in that way I like.
How can I rewrite single labels?
The administrator has disabled public write access.

Two Column Responsive Form 11 years 5 months ago #25708

  • info3442
  • info3442's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
Anyone?
The administrator has disabled public write access.

Two Column Responsive Form 11 years 1 month ago #26972

  • aksmith
  • aksmith's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 2
If you are using Bootsrap on the site, then you just have to:
1. go to Properties
2. set auto-generate layout to 'no'
3. copy the layout code as a backup.
4. add relevant Bootstrap 2 classes (e.g. span6, etc.).
You may have to add an enclosing div class="row" to group elements together.
5. for a 2 column layout, wrap each column in a 'span6' (=50% width).
Note that in mobile devices, the second column will display below the first.
6. If you are using a Bootstrap 3 template, the classes have changed (see Bootstrap site for details).
The administrator has disabled public write access.
The following user(s) said Thank You: mcdue, hasnabaa

Two Column Responsive Form 11 years 1 month ago #27033

I found the following site very helpfull to make my form responsive:
http://www.responsivegridsystem.com/

Take a look at an example form here:
http://toernooi.svegchel.nl/index.php?option=com_rsform&formId=5

Here is the XHTML form layout code used for that form:
<fieldset class="formFieldset">
<legend>{global:formtitle}</legend>
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<div class="section group">
<div class="col span_1_of_2">
<ol class="formContainer" id="rsform_5_page_0">
<h3>column 1</h3>
	<li class="rsform-block rsform-block-firstname">
		<div class="formBody">{FirstName:body}<span class="formClr">{FirstName:validation}</span></div>
	</li>
	<li class="rsform-block rsform-block-lastname">
		<div class="formBody">{LastName:body}<span class="formClr">{LastName:validation}</span></div>
	</li>
	<li class="rsform-block rsform-block-email">
		<div class="formBody">{Email:body}<span class="formClr">{Email:validation}</span></div>
	</li>
</ol>
</div>
<div class="col span_1_of_2">
<ol class="formContainer">
<h3>column 2</h3>
	<li class="rsform-block rsform-block-captcha">
		<div class="formBody">{Captcha:body}<span class="formClr">{Captcha:validation}</span></div>
	</li>
	<li class="rsform-block rsform-block-verzend">
		<div class="formBody">{verzend:body}<span class="formClr">{verzend:validation}</span></div>
	</li>
</ol>
</fieldset>
</div>
</div>

And here is the CSS code I added to the template:
/*  GRID OF TWO   ============================================================================= */
 
/*  SECTIONS  ============================================================================= */
 
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
 
/*  GROUPING  ============================================================================= */
 
 
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
 
/*  GRID COLUMN SETUP   ==================================================================== */
 
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
 
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
 
 
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
 
@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}
 
.span_2_of_2 {
	width: 100%;
}
 
.span_1_of_2 {
	width: 49.2%;
}
 
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 
@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}
Last Edit: 11 years 1 month ago by ruud.spreeuwenberg.
The administrator has disabled public write access.
The following user(s) said Thank You: mcdue, hasnabaa
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!