How can I enlarge the space between the Tekst Areas and the Input Fields.
Ie. Name ....................... Robert.
Adress.......................Boulevard 93
etc etc
The space now in the standard forms is far too small.
Name...........Robert
Hope you have a solution
Ie. Name ....................... Robert.
Adress.......................Boulevard 93
etc etc
The space now in the standard forms is far too small.
Name...........Robert
Hope you have a solution
Hi,
a way is to load some css in your form.
Hereby some example who makes the label 110px width and space them 10px from the input fields and let the fields take up 70% of the remaining space.
the following code will align the submit button, captcha and title field with the input fields.
Hope this can set you on the way.
a way is to load some css in your form.
Hereby some example who makes the label 110px width and space them 10px from the input fields and let the fields take up 70% of the remaining space.
.ccms_form_element label {
float: left;
font-weight: bold;
line-height: 18px;
margin: 6px 0 9px;
width: 110px;
padding-right: 10px;
text-align: right;
}
.ccms_form_element > input[type="text"],
.ccms_form_element > input[type="email"],
.ccms_form_element > input[type="url"],
.ccms_form_element > textarea {
width: 70% !important;
}
the following code will align the submit button, captcha and title field with the input fields.
input[type="submit"], #contactus-title, #recaptcha {
margin-left: 120px !important;
}
Hope this can set you on the way.
Thanks for the answer. But since I am not a html-expert, please give me the right path
to the css file.
When I open the com chronoforms component I see a lot of css files.
Regards
to the css file.
When I open the com chronoforms component I see a lot of css files.
Regards
You don't have to go this far. Just add an action "Load CSS" in your form onLoad event just before the "Show HTML" action. Open the "Load CSS" action and copy the example code.
This should do the trick.
This should do the trick.
After loading Load css in the Eventmode I got the form in the frontend just as shown
in the attachment.
Not very beautifull in my opinion. Moreover, my problem with the space between the
text and the infillfield, is not solved.
I use Joomla 3.0 and a Artisteer 4 template.
Can you do something about it ?
Regards
Rolf vd Mark
in the attachment.
Not very beautifull in my opinion. Moreover, my problem with the space between the
text and the infillfield, is not solved.
I use Joomla 3.0 and a Artisteer 4 template.
Can you do something about it ?
Regards
Rolf vd Mark
Hi Rolf,
It's up to you to style your form the way you want it; the image you've posted doesn't look much like the default ChronoForms styling so I guess that most of it is coming from your template or your custom CSS.
If you post a link to your form it is easier to see exactly what is happening.
Bob
PS I removed your email from your posts here. These pages are publicly visible and emails may get scraped by spammers.
It's up to you to style your form the way you want it; the image you've posted doesn't look much like the default ChronoForms styling so I guess that most of it is coming from your template or your custom CSS.
If you post a link to your form it is easier to see exactly what is happening.
Bob
PS I removed your email from your posts here. These pages are publicly visible and emails may get scraped by spammers.
Hi,
when you used the settings as in my example the label will be 110px width, a space of 10px and the field will take up 70% of the div width.
You can play with these settings, like setting the label width to 45% and also the field to 45%.
If you have a fixed page (width) then you can change this to a fixed width like 200px, 10px, and 500px.
Do know that this will look bad on smaller screens.
when you used the settings as in my example the label will be 110px width, a space of 10px and the field will take up 70% of the div width.
You can play with these settings, like setting the label width to 45% and also the field to 45%.
If you have a fixed page (width) then you can change this to a fixed width like 200px, 10px, and 500px.
Do know that this will look bad on smaller screens.
This topic is locked and no more replies can be posted.
