Fieldset Row Label overlaps text (span) content

[GoogleCodeExporter]

What steps will reproduce the problem?

1. Create a div with the class panel (sample markup & screenshots attached)
2. Add a fieldset to the panel
3. Add a div with the class of row to the fieldset
4. Add a label to the div of 20 or more characters (e.g. Employee ID Required:)
5. Add a span tag after the label with some text in it

What is the expected output? What do you see instead?

a.) Expect the text in the span tag to appear to the right of the label, 
regardless of label length. Instead, text starts at a fixed position inside the 
row div.

b.) Span text wrapping spills outside of row. (See iPhone screenshot.)

Original issue reported on code.google.com by pcolo...@gmail.com on 11 Jun 2009 at 8:14

Attachments:

• iphone_screenshot.jpg
• chrome_screenshot.jpg
• bug.htm

[GoogleCodeExporter]

Looking at the iPhone menus, the Span text in a row should be right aligned, 
whereas 
the label is aligned to the left.

Original comment by pcolo...@gmail.com on 11 Jun 2009 at 11:04

[GoogleCodeExporter]

Try changing .row > span rule to:

padding: 12px 14px 0 0;
line-height: 42px; /*matches .row > label*/
margin: 0;

Original comment by pcolo...@gmail.com on 11 Jun 2009 at 11:11

[GoogleCodeExporter]

I ran into a similar problem, so i created a right aligned label.  I used a 
label because I didn't see the span :)  

You want to do the same but set the width probably with a percent.  This should 
fix your landscape issue though.  Just add this (change span for label) and 
then set the span with the "rAlign" class.

    .row > label.rAlign
    {
    text-align: right;
        font-weight: normal;
        position: relative;
        margin-right: 8px;
        color: navy;
    }

Original comment by Elements...@gmail.com on 7 Jul 2010 at 6:41

Attachments:

• clientInfo.jpg

[GoogleCodeExporter]

Hi,

changing the .row > span rule in iui.css to the following worked for me:

.row > span {
        float: right;
        line-height: 42px;
        margin-right: 8px;
}

Original comment by quel...@gmail.com on 28 Jun 2012 at 7:39