Forums

Container side by side

FrankG 03 Apr, 2013
Can someone please explain me, how I can put two Container in one line.

For examples:
"Street" and "Number"
"Zip codes" and "City"


Thanks



Sorry for my english!
GreyHead 03 Apr, 2013
Hi Frank,

If you click the Other tab in the Element configuration then there are 'Start a Multi field row' and 'Add to a Multi field row' options. They should do what you need.

Bob
FrankG 03 Apr, 2013
Hi Bob,

thank you for the quick answer.
I tried it, but the result isn't satisfying.

[attachment=0]test.png[/attachment]

I use 'Start a Multi field row' and 'Add to a Multi field row'.
I also tried out the 'Hide Label'.

Maybe you have an idea to make it more usable.
Thanks
Frank

Here is the code:



<div class="ccms_form_element cfdiv_select" id="id_anrede_container_div"><label for="id_anrede">Anrede</label><select size="1" id="id_anrede" class=" validate['required']" title="Anrede" name="Anrede">
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
<option value="" selected="selected"></option>
</select>
<div class="clear"></div><div id="error-message-Anrede"></div></div><div class="ccms_form_element cfdiv_text multiline_start" id="id_vorname_container_div"><label for="id_vorname">Vorname</label><input id="id_vorname" maxlength="75" size="20" class=" validate['required']" title="Vorname" type="text" value="" name="Vorname" />
<div class="clear"></div><div id="error-message-Vorname"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="id_nachname_container_div"><label for="id_nachname">Nachname</label><input id="id_nachname" maxlength="75" size="30" class=" validate['required']" title="Nachname" type="text" value="" name="Nachname" />
<div class="clear"></div><div id="error-message-Nachname"></div></div><div class="ccms_form_element cfdiv_text multiline_start" id="id_strasse_container_div"><label for="id_strasse">Straße / Nr</label><input id="id_strasse" maxlength="150" size="30" class=" validate['required']" title="Straße" type="text" value="" name="Straße" />
<div class="clear"></div><div id="error-message-Straße"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="id_nummer_container_div"><label for="id_nummer">Nummer</label><input id="id_nummer" maxlength="10" size="4" class="" title="Nummer" type="text" value="" name="Nummer" />
<div class="clear"></div><div id="error-message-Nummer"></div></div><div class="ccms_form_element cfdiv_text multiline_start" id="id_plz_container_div"><label for="id_plz">PLZ / Ort</label><input id="id_plz" maxlength="5" size="10" class=" validate['required','digit']" title="PLZ" type="text" value="" name="PLZ" />
<div class="clear"></div><div id="error-message-PLZ"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="id_ort_container_div"><label for="id_ort">Ort</label><input id="id_ort" maxlength="150" size="30" class=" validate['required']" title="Ort" type="text" value="" name="Ort" />
<div class="clear"></div><div id="error-message-Ort"></div></div>

GreyHead 03 Apr, 2013
Hi Frank,

That's really up to you to work out how you want it to look. You can use CSS to change the width of the inputs to that they match up if that is what you need.

There's one small ChronoForms problem that looks as though you need to have an extra <div> tag after the last multi-row.

Bob

PS In general good form design avoids multiple inputs on the same row unless they are closely related like the parts of a date for example.
FrankG 03 Apr, 2013
Hi Bob,

i'll try :wink:

Thank you.

Frank
This topic is locked and no more replies can be posted.