Wy does field length take whole space?

Hi there,
I am in the process of migrating my site from J15 to J25. Last step in the process is migrate ChronoConnectivity and ChronoForms from V3 to V4(.0 RC3.5.2).

The form-fields I create in V4 appear on the webpage covering the full 100% of the element they are in, no matter what length I try to force it to.

Little example:

....
<div class="ccms_form_element cfdiv_datetime" id="input_datetime_71_container_div" style=""><label>Datum:</label><input maxlength="50" size="16" class="cf_datetime_picker" title="" type="text" value="" name="input_datetime_7" />
<div class="clear"></div><div id="error-message-input_datetime_7"></div></div>
....

... see the result in: http://www.vvckc.nl/jupgrade/index.php?option=com_chronoforms&chronoform=WedstrijdTest

What am I doing wrong here? - Or is this maybe a "CSS thing"?

Hi JvdStel,

It's because the template sets the input width to 100%. If you add something like this to a Load CSS action it will bring it back under your control

.Chronoform input {
  width: 200px;
}

Bob

Thanks Bob

Johan

One further question: Where do you suggest I put in the Load CSS action? I tried the template.css, but that had no effect.

Hi JvdStel,

The ChronoForms Load CSS action goes into the form ON Load event.

Please see this FAQ

Bob

Hi Bob,

I have the same problem as JvdStel.
I tryied the following code

.Chronoform input {
  width: 200px;
}

in the loadcss block of events tab, but doesn't work :'(
Any other idea ?

THX
Jose

BTW : my chronoform version : V4.0 RC3.5.2 and my generated code :

 <form action="http://192.168.1.222/index.php/contact?chronoform=contact&event=submit" name="contact" id="chronoform_contact" method="post" class="Chronoform"><div class="ccms_form_element cfdiv_text" id="prenom_container_div" style=""><label for="prenom">Label Text</label><input id="prenom" maxlength="150" size="30" class="" title="prenom" type="text" value="" name="prenom" />
<div class="clear"></div><div id="error-message-prenom"></div></div><input type="hidden" name="a0c138ebb18ed03a08bb1efab5a852d7" value="1" /></form>

Hi Jose,

It will be an interaction with the template CSS; looks as though your form is on a local server so I can't see it :-(

Use your browser web developer tools to check exactly what CSS is being applied to the inputs in your form.

Bob

Thanks Bob,

That's ok now, i've found my problem in the template css.

Thx a lot