Page 1 of 1
[SOLVED] Form Builder- line breaks between form fields
Posted: Wed Nov 21, 2012 9:46 am
by burlington
Using CMSMS 1.11.2.1. Form Builder version 0.7.1
I am making a form for a person who wants more space between each of the form fields.
As I am not a PHP coder could anyone tell me the best way of achieving this.
Thank you
Martin
Re: Form Builder- line breaks between form fields
Posted: Wed Nov 21, 2012 11:25 am
by timdebuurman
Best do it in CSS
.formbuilderform div {
margin-bottom: 10px;
}
Something like that.
Re: Form Builder- line breaks between form fields
Posted: Wed Nov 21, 2012 11:55 am
by burlington
Thank you very much. Unfortunately it does not work. I have attached Form Builder Style Sheet to the template of course and have been trying various places and ways of including the piece of code you gave me.
This is what the Style Sheet consists of now:
<quote>
/* Sample FormBuilder CSS base */
form {
margin-top: 0
}
form, td, th, li {
font-size: 100%
}
form div {
margin-bottom: 10px;
}
fieldset div {
margin-bottom: 0.5em;
margin-left: 1em;
}
fieldset div div {
margin-top: 0.5em;
margin-left: 1em
}
fieldset {
margin-bottom: 1em;
border: 1px solid #F60;
padding: 0.5em
}
fieldset label {
width: auto;
}
legend {
color: #FFF;
background: #F60;
font-style: italic;
font-size: 1.2em;
margin-bottom: 0.5em;
padding: 0.2em;
width: auto;
border: 1px solid #CCC
}
textarea {
margin: 0.5em 0;
width: 98%;
height: 6em
}
/* Apply this class to text/select input fields with shorter labelsto help alignment */
.short-label label {
float: left;
width: 10em
}
.short-label fieldset div input, .short-label fieldset div select {
width: 16em
}
/* Pretty up your Captcha image output */
.captcha {
margin: 0.5em 0;
width: 200px;
text-align: center
}
.captcha img {
border: 1px solid #F60;
margin-bottom: 0.5em
}
.captcha input {
width: 196px;
margin-top: 0.5em
}
/* Just a bit more room for the Submit button */
.submit {
margin-top: 0.5em
}
.contactform input {
border: 1px solid #f60;
}
.contactform input.checkbox {
border: none;
}
.contactform label {
display: block;
float: left;
width: 150px;
}
.contactform label.label {
display: inline;
float: none;
width: 50px;
font-size: 10px;
}
.contactform textarea {
background-color: #ffc;
border: 1px solid #f60;
}
.formbuilderform .message {
line-height: 16px;
padding: 0 0 8px 0;
}
</quote>
Can anyone help please?
Re: Form Builder- line breaks between form fields
Posted: Wed Nov 21, 2012 12:35 pm
by timdebuurman
try to add it to the
.contactform input
Code: Select all
.contactform input {
border: 1px solid #f60;
margin-bottom: 10px;
}
Re: Form Builder- line breaks between form fields
Posted: Wed Nov 21, 2012 12:58 pm
by burlington
That works fine. Many thanks.
Martin