[SOLVED] Form Builder: Alignment Problem

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
JoFe
Forum Members
Forum Members
Posts: 18
Joined: Thu Mar 11, 2010 9:30 am

[SOLVED] Form Builder: Alignment Problem

Post by JoFe »

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
Last edited by JoFe on Tue Jun 22, 2010 8:57 am, edited 1 time in total.
maranc
Forum Members
Forum Members
Posts: 249
Joined: Tue May 04, 2010 5:04 pm

Re: Form Builder: Alignment Problem

Post by maranc »

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.
JoFe
Forum Members
Forum Members
Posts: 18
Joined: Thu Mar 11, 2010 9:30 am

Re: Form Builder: Alignment Problem

Post by JoFe »

Thanks Marek, looks much better now
User avatar
webgeest
Forum Members
Forum Members
Posts: 13
Joined: Thu Dec 02, 2010 8:19 pm

Re: [SOLVED] Form Builder: Alignment Problem

Post by webgeest »

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!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: [SOLVED] Form Builder: Alignment Problem

Post by Dr.CSS »

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
User avatar
webgeest
Forum Members
Forum Members
Posts: 13
Joined: Thu Dec 02, 2010 8:19 pm

Re: [SOLVED] Form Builder: Alignment Problem

Post by webgeest »

Ok, i got it. When you change the CSS, you need to 'attach the stylesheet to Template" with the {CSS} button.

Thx.
Post Reply

Return to “Layout and Design (CSS & HTML)”