[SOLVED]Form builder CSS [/SOLVED]

[ABU]

Howdy. I've been messing with the form builder and built a form that is ready to use. I'm not a CSS guru, but comfortable enough with it to edit and create my own styles, but having some issues getting the styles of my custom form to line up correctly. The stylesheet attached to my template where the form is displayed doesnt understand how to show the form builder elements. I've been searching around, but a little confused on the form builders elements so that I can style them correctly.

How can I either find what each element is called so I can write CSS for my form- or- is there a way I can define each element in my formbuilder module so that my current CSS can handle the formatting?

Any direction would be much appreciated. I've also attached a screen shot of how the form is displaying.

[unobtrusivebooth]

Hello perappgui

Looks like a float problem to me without seeing the html and css.
Try the following css:

form
{
float:left;
width:25em;/*adjust to suit*/
}

label
{
float:left;
width:14em;/*adjust to suit*/
}

#an_input_field
{
width:12em;
}

example of form element:

      Username
     


Do not float the 's or 's that wrap the form label and input tags.

Hope this helps.

[ABU]

Thanks for your reply. It helped out a lot. At first glance I thought it solved the issue, but I think there is a conflict with my CSS that is'nt allowing things to line up 100% correctly. The CSS code that you provided me almost did the trick, but again, i think its something within one of my DIV's that is preventing things from lining up.

The text (labels) aren't floating left completely and the newsletter radio buttons arent lined up to the appropriate labels. Please see the screen shot for a visual. =)

I've also added the HTML (as cleaned up and easy to read as possible) and the CSS for the page.

Thank's for helping.

[Mantlet]

Hey,

One of your questions was how to name each individual item on your form or find its name. When you create a new form field, or edit an existing one, you should check out the 'advanced settings' tab. There is a field 'CSS Class for this field:' you can fill in, with the name of the appropriate CSS style. Just the name, not the # or . preceeding it.
The fun is, you can even type different style names seperated by a space and you can combine those.

I didn't have time to look through your CSS, but could it work for the labels to have the text aligned left, instead of centered?
Make it something like this?

Code: Select all

.form_containing_div label {
   text-align: left;
}

Hope this helps in naming unique fields. I've used all unique field CSS to create this page with formbuilder: http://www.waarderpolderenquete.nl/enquete.html

Good luck, hopefully someone else can spare some more time digging through your CSS.