OT CSS styling for form field lables:

Rails
1

I want to have my form field and their associated labels stack
vertically without introducing xhtml inline or block elements. So, given
this:

<% =

Full Legal Name:

<input id="entity_entity_legal_name"
       name="entity[entity_legal_name]"
       size="80" type="text" />

-%>
-%>

I want to see this on the form:

Full Legal Name:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Does anyone here know, or can provide a reference to, a css recipe that
will accomplish this? All the references that I can find introduce
block elements or accomplish vertical positioning of lables, but I want
to do things like this:

Label 1: Label 2: Lable3:
Field1XX Field2XXXXXXXX Field3XXXXXXXXX

and block elements will kill that idea.

2

Noticed you’re trying to do some sort of table approach… Use spans to
encapsulate your pairs :slight_smile: Those are invisible and inline.

3

Well… first, discover if you have valid XHTML. A label tag does not
wrap
your form field. It sits next to it and the “for” attribute binds them
together.

Last Name:

So, restructure your form:

Full Legal Name:

I give the form field an id to help scope the css so I don’t affect all
of
the fields throughout an application.

Now just make it happen. You don’t actually do anything with the
label…
instead you do it to the form elements. Use the display:block; css
property
to make these block elements, and then the clear:both attribute to force
these fields to a new line.

#my_form input, #my_form select, #my_form textarea{display:block;
clear:both;}

Get more granular by giving each form field a class or a unique ID.

Hope that helps!

-bph

4

Yeah, OT, but

On Mon, Mar 31, 2008 at 2:37 PM, Brian H. [email protected] wrote:

Well… first, discover if you have valid XHTML. A label tag does not wrap
your form field.

It doesn’t have to but it can. In which case you can drop the for=

Regardless,

Here’s an example (caveat: only tested in Firefox) that lets you have
label/input pairs side by side with no extraneous markup:

label.input_field { display: block; float: left; margin-right: 2em; } input { display: block; } demo Full Legal Name:



Full Legal Name:


HTH,

Hassan S. ------------------------ [email protected]