thr3ads.net - Rails - OT CSS styling for form field lables: [Mar 2008]

If this information is useful, please help other people find it:
Share via:

James Byrne

2008-Mar-31 20:53 UTC

OT CSS styling for form field lables:

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.
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Brian Hogan

2008-Mar-31 21:37 UTC

head link

Re: OT CSS styling for form field lables:

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.

<label for="lname">Last Name:</label>
<input type="text" name="lastname" id="lname"
/>

So, restructure your form:

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

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

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

On undefined, James Byrne
<rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org> wrote:
>
> 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.
> --
> Posted via http://www.ruby-forum.com/.
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Brian Hogan

2008-Mar-31 21:39 UTC

head link

Re: OT CSS styling for form field lables:

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



On undefined, Brian Hogan
<bphogan-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> 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.
>
> <label for="lname">Last Name:</label>
> <input type="text" name="lastname"
id="lname" />
>
> So, restructure your form:
>
> <form id="my_form">
>  <label class="input_field"
>         for="entity_entity_legal_name"
>         title="Registered full legal name">
>         Full Legal Name:  </label>
>
>    <input id="entity_entity_legal_name"
>           name="entity[entity_legal_name]" size="80"
type="text" />
> </form>
>
> 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
>
>
> On undefined, James Byrne
<rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org> wrote:
>
> >
> > 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.
> > --
> > Posted via http://www.ruby-forum.com/.
> >
> > > >
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Hassan Schroeder

2008-Mar-31 21:43 UTC

head link

Re: OT CSS styling for form field lables:

Yeah, OT, but

On Mon, Mar 31, 2008 at 2:37 PM, Brian Hogan
<bphogan-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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:

<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,
-- 
Hassan Schroeder ------------------------
hassan.schroeder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails - Mar 2008 - OT CSS styling for form field lables:

OT CSS styling for form field lables:

Re: OT CSS styling for form field lables:

Re: OT CSS styling for form field lables:

Re: OT CSS styling for form field lables: