Space between text boxes

Hi!
I am using V4 but I have a problem with the layout. The distance between the text boxes are huge.
Here is my code created with the wizard. This is the website; http://www.ibuild4u.nl/emmapoort/index.php?option=com_chronoforms&Itemid=8.
Thank you!

<div class="ccms_form_element cfdiv_text" id="input_text_13_container_div"><label>Naam</label><input maxlength="100" size="30" class=" validate['required']" type="text" value="" name="input_text_13" />
<div class="clear"></div><div id="error-message-input_text_13"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_14_container_div"><label>Adres</label><input maxlength="150" size="30" class=" validate['required']" type="text" value="" name="input_text_14" />
<div class="clear"></div><div id="error-message-input_text_14"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_15_container_div"><label>Postcode</label><input maxlength="150" size="30" class="" type="text" value="" name="input_text_15" />
<div class="clear"></div><div id="error-message-input_text_15"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_16_container_div"><label>Woonplaats</label><input maxlength="150" size="30" class=" validate['required']" type="text" value="" name="input_text_16" />
<div class="clear"></div><div id="error-message-input_text_16"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_11_container_div"><label>Email adres</label><input maxlength="150" size="30" class=" validate['email']" type="text" value="" name="input_text_11" />
<div class="clear"></div><div id="error-message-input_text_11"></div></div><div class="ccms_form_element cfdiv_select" id="input_select_12_container_div"><label>Voorkeur appartement</label><select size="1" class="" type="select" value="" name="input_select_12">
<option value="Emma Suite">Emma Suite</option>
<option value="Maxima Suite">Maxima Suite</option>
<option value="Boulevard 71a">Boulevard 71a</option>
</select>
<div class="clear"></div><div id="error-message-input_select_12"></div></div><div class="ccms_form_element cfdiv_datetime" id="input_datetime_2_container_div"><label>Datum van</label><input maxlength="150" size="16" class="cf_date_picker" type="text" value="" name="input_datetime_2" />
<div class="clear"></div><div id="error-message-input_datetime_2"></div></div><div class="ccms_form_element cfdiv_datetime" id="input_datetime_3_container_div"><label>Datum tot</label><input maxlength="150" size="16" class="cf_date_picker" type="text" value="" name="input_datetime_3" />
<div class="clear"></div><div id="error-message-input_datetime_3"></div></div><div class="ccms_form_element cfdiv_submit" id="input_submit_1_container_div"><input name="input_submit_1" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_1"></div></div>

Hi,

Looks like you need to edit the ChronoForms CSS. See this line 21 in com_chronoforms/css/frontforms/css

.ccms_form_element { margin-bottom: 3px; position: relative; padding: 3px 0px 3px 5px; /*border-bottom: 1px solid #dddddd;*/ clear: both;}

Bob

thanx!!! it's working.... you're the best :o

@srecko_marielle, Can I know what was the fix here please ?

Thanks!
Max

Hi!
I have changed in the following:
wwwroot/Emmapoort/components/com_chronoforms/css/frontforms.css

This line;
.ccms_form_element { margin-bottom: 10px; position: relative; padding: 10px 0px 10px 5px; /*border-bottom: 1px solid #dddddd;*/ clear: both;}

By;
.ccms_form_element { margin-bottom: 3px; position: relative; padding: 3px 0px 3px 5px; /*border-bottom: 1px solid #dddddd;*/ clear: both;}

But now I have another question. I want to increase the space between the name of the text box and the box itselfs. Where can I do that? Thanx!

Hi

I think it's the width setting hi line 13

.ccms_form_element label { float: left; width: 150px; line-height: 18px; margin: 6px 0 9px ; font-weight: bold;}

Bob

@srecko_marielle, Thanks for sharing!🙂

Regards,
Max

hey!

I finally solved the problem. I included the following lines.

.cfdiv_select select,
/*.cfdiv_text input, .cfdiv_text label { float: left; }*/
.cfdiv_text label { width: 200px; }
.cfdiv_select label { width: 325px; }
.cfdiv_datetime label { width: 200px; }

Thank you for your advise

I have the same problem. I've tried to change:

.ccms_form_element { margin-bottom: 10px; position: relative; padding: 10px 0px 10px 5px; /*border-bottom: 1px solid #dddddd;*/ clear: both;}

to

.ccms_form_element { margin-bottom: 3px; position: relative; padding: 3px 0px 3px 5px; /*border-bottom: 1px solid #dddddd;*/ clear: both;}

but it does not work...

What's the problem? Can You please explain?

Many thanks in advance!

Hi Traktor,

Please upgrade to the latest CFv4 RC1.9 release if you haven't alrady done so. Max has added an extra 'tight' set of CSS files that you can select from the General tab.

Bob