OT CSS styling for form field lables:

rubyonrails-talk
1

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

<% =   <label class="input_field"          for="entity_entity_legal_name"          title="Registered full legal name">          Full Legal Name:

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

  </label> -%> -%>

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

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: 
<input id="entity_entity_legal_name"
       name="entity[entity_legal_name]" size="80" type="text" />

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

3

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

4

Yeah, OT, but

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:

<style type="text/css"> label.input_field {   display: block;   float: left;   margin-right: 2em;   } input {   display: block;   } </style>

<form><fieldset><legend>demo</legend> <label class="input_field"         for="entity_entity_legal_name"         title="Registered full legal name">         Full Legal Name:

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

<label class="input_field"         for="entity_entity_legal_name"         title="Registered full legal name">         Full Legal Name:

   <input id="entity_entity_legal_name"           name="entity[entity_legal_name]"           size="20" type="text" /> </label> </fieldset> </form>

HTH,