I'm using cms 1.7.1 and the Form Builder 0.6.2 with the Contact Form.
Problem: The entry boxes are not aligned but appear right after the title of the respective box.
How can I align the entry boxes?
Thanks
[SOLVED] Form Builder: Alignment Problem
[SOLVED] Form Builder: Alignment Problem
Last edited by JoFe on Tue Jun 22, 2010 8:57 am, edited 1 time in total.
Re: Form Builder: Alignment Problem
Hi, please use css stylesheet:
1. First - set style for label, example like below:
fieldset label {
display: block;
float: left;
width:150px;
font-size: 9px;
padding-right: 1em;
}
All titles of boxes will have the same width (in example 150px - natural you can set it shorter or longer, as you want). This is answer, why entry boxes are not aligned but appear right after the title.
2. Second - set style for input text box, input password, input file, select, textarea etc. You can add any effect, witch you want: witdh, border, color, hover efect etc.
Remember, that this way will set all boxex in all form (example yet in FEU, SelfRegistration etc.).
Field input, labels can you change for each form in another way, please use id div:
{FormBuilder form='contact'}
Later you can set indywidual style for all fields in this #div, like example:
div#contact_form fieldset label {
display: block;
float: left;
width:250px;
font-size:11px;
padding-right: 1.2em;}
Best regards,
Marek A.
1. First - set style for label, example like below:
fieldset label {
display: block;
float: left;
width:150px;
font-size: 9px;
padding-right: 1em;
}
All titles of boxes will have the same width (in example 150px - natural you can set it shorter or longer, as you want). This is answer, why entry boxes are not aligned but appear right after the title.
2. Second - set style for input text box, input password, input file, select, textarea etc. You can add any effect, witch you want: witdh, border, color, hover efect etc.
Remember, that this way will set all boxex in all form (example yet in FEU, SelfRegistration etc.).
Field input, labels can you change for each form in another way, please use id div:
{FormBuilder form='contact'}
Later you can set indywidual style for all fields in this #div, like example:
div#contact_form fieldset label {
display: block;
float: left;
width:250px;
font-size:11px;
padding-right: 1.2em;}
Best regards,
Marek A.
Re: Form Builder: Alignment Problem
Thanks Marek, looks much better now
Re: [SOLVED] Form Builder: Alignment Problem
Hi,
I don't see it. I use the Formbuilder, standard contactform.
Where is the css I need to edit?
Is this the "FormBuilder Default Style"? And if so,
where do I put the changed code inside the css?
Thx!
I don't see it. I use the Formbuilder, standard contactform.
Where is the css I need to edit?
Is this the "FormBuilder Default Style"? And if so,
where do I put the changed code inside the css?
Thx!
Re: [SOLVED] Form Builder: Alignment Problem
Yes that is the default installed with the module style sheet, look at the code produced by form builder in page view source then look at the style sheet for the ones used for it and change what you want, you should copy it so you have a clean one to refer back to
Re: [SOLVED] Form Builder: Alignment Problem
Ok, i got it. When you change the CSS, you need to 'attach the stylesheet to Template" with the {CSS} button.
Thx.
Thx.