Forums

Space between text boxes

srecko_marielle 01 Feb, 2011
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>
GreyHead 01 Feb, 2011
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
srecko_marielle 04 Feb, 2011
thanx!!! it's working.... you're the best :o
Max_admin 07 Feb, 2011
@srecko_marielle, Can I know what was the fix here please ?

Thanks!
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
srecko_marielle 02 Mar, 2011
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!
GreyHead 02 Mar, 2011
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
Max_admin 04 Mar, 2011
@srecko_marielle, Thanks for sharing!🙂

Regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
srecko_marielle 16 May, 2011
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
Traktor 03 Jun, 2011
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!
GreyHead 03 Jun, 2011
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
This topic is locked and no more replies can be posted.