SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Formatting Forms with label tags

    I've got a form that I'm trying to layout semantically and format with CSS. As it's produced dynamically (from ASP.NET MVC) some elements may be rendered as text rather than input tags as they may be read-only for that screen. I am trying to add a width to the label tags to neaten up the form and align the values/value boxes, but it seems I can only do this if I float them (is that correct?). That works OK for when I have rendered values after the label tag, but if the value is blank the left float seems to stack against the previous label, even though both are contained within p tags (these should be block level, yes?). What, if anything, am I doing wrong?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title>
    	
    	Edit
     
    </title>
            <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file -->
            <style type="text/css">
                div.FieldGroup {background-color: Blue; }
                p.Field { display: block; }
                span.NoteHeader { font-style: italic;}
                label { float: left; width: 150px;} 
            </style>
    </head>
     
    <body>
      <div id="main">
                
     
        <h2>Edit</h2>
     
        
     
        <form action="" method="post">
            <div id="MainSection" class="FieldGroup">
                <fieldset>
                    <legend>Person Identification</legend>
                    <p class="Field">
                        <label>Name:</label>
                        Name
                    </p>
                    <p class="Field">
                        <label for="Colour">ChildStatus:</label>
                        <select id="Colour" name="Colour">
                            <option value="10">Red</option>
                            <option value="20">Yellow</option>
                            <option selected="selected" value="30">Orange</option>
                        </select>
                    </p>
                    <p class="Field">
                        <label for="Age">Age:</label>
                        <input id="Age" name="Age" type="text" value="" />
                        
                    </p>
                    <p class="Field">
                        <label>Birthplace:</label>
                    </p>
                    <p class="Field">
                        <label for="Reference">Reference:</label>
                        <input id="Reference" name="Reference" type="text" value="" />
                    </p>
                </fieldset>
            </div>
        </form>
      </div>
     
    </body>
    </html>
    Cheers

    MH

    (P.S. - I can't add in readonly textboxes to contain these blanks as they want plain text if they can't change the value)

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I am trying to add a width to the label tags to neaten up the form and align the values/value boxes, but it seems I can only do this if I float them (is that correct?)
    Partially. Blocks as opposed to inlines may have a height, width, and vertical margins. Inlines can't have those, though for your info I've noticed inputs seem to act like inline-block elements instead of plain inlines, as they can have dimensions and vertical margins.
    So
    float
    block
    inline-block
    pos: absolute
    would work if you set a width on them. Floating is prolly ok and will prolly do what you want. I remember once doing definition lists and I was able to give the dd's a left margin that was a good size and this made the same effect.


    That works OK for when I have rendered values after the label tag, but if the value is blank the left float seems to stack against the previous label, even though both are contained within p tags (these should be block level, yes?)
    Dunno what "value is blank" means, do you mean sometimes there is no label text, but just the tag?
    Anyway, the p is a containing block but it's not actually enclosing those labels... remember a static block can't see floated children. You can either make the p's enclose the floats using one of the float-enclosing techniques (like setting overflow, or using :after/clearfix, or setting display: table on the p...) or you might get what you want just by making the p's clear: left

    The p's still won't be enclosing the floats, but each p will then be able to see the bottom of the previous p's floated label, and will be able to start a new line underneath it... and since it's holding its input, the input will stay down too.

    p.Field { display: block; }
    isn't necessary, you're right that they are blocks from the beginning (unless they were set to inline earlier).
    so you can haz
    .Field {
    clear: left;
    }
    or a float-enclosing
    .Field {
    overflow: hidden (or auto);
    }
    or whatever you want.

    Personally I tend to use divs instead of p's for this since I don't see the label-input pair as a p but I also build regular forms, and this one is kinda weird with the plain text and stuff in it. If you can argue the semantics of a p in this form, you're fine.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Poes, that's sorted it out.

    By "value is blank" I mean that certain labels have a text value to their right instead of a field (though they will still have their own label text), if they can't be edited by the user. But for some of these, that text value may be blank, and it was this that way causing me the problem.

    "I" was using paragraphs to enclose the lines because that's what VS (in it's infinite wisdom) puts in under the MVC framework (I was slightly quizzical about it myself) - I am changing these to divs as this makes more sense to me too.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One other question: why, if I change the CSS to

    HTML Code:
            <style type="text/css">
                div.FieldGroup {background-color: Blue; width: 800px }
                p.Field { float: left; margin: 5px 5px 5px 10px; width: 40%; }
                span.NoteHeader { font-style: italic;}
                label { float: left; width: 150px;} 
            </style>
    does the last div (the reference one) appear in the right "column" rather than be aligned to the left?

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I dunno, but I don't see anyone clearing anyone. I see you've used another float-enclosing technique: floating the container also makes it contain its own floats.

    The <p> instead of a div ultimately doesn't matter, and I suspect your software did that because, if you look at the HTML4 specs, that's what they do (and some people argue that still makes sense).

    When I use divs, I don't float them, but I do put the clear on them. This helps me get around the IE bug where floats in the same direction can't clear other floats in that direction. So I usually have

    <div>
    <label/>
    <input/>
    </div>

    form div {
    clear: left;
    width: 98&#37;; /*haslayout*/
    overflow: hidden; /*wrap floats*/
    }

    and inside the labels are floated.

    But I think you'd be okay with just adding clear to your p's.

    Also make sure there's enough room, and no float snagging. Float snagging happens when you have a row of floated boxes and they're all different heights, and then the float who needs to go to the next line (either because there's not enough room, or becuase it's clearing) can't quite make it all the way to the left side, because its top is hitting some low-hanging (tallest) float from the line above. Happens cause floats act like bubbles and are always trying to stay as close to the top of their container as possible.
    In my tables page, I ran into that with my calendars, where some months had this whole extra week because the 31st was on some new week. So the other months next to this longer one get an extra bottom margin so the next float in line doesn't get snagged. If they weren't tables I could have given everyone a min-height that was as tall as the tallest possible box. There's a few other ways to do it, I think Paul's got a list of them.

    By "value is blank" I mean that certain labels have a text value to their right instead of a field (though they will still have their own label text), if they can't be edited by the user. But for some of these, that text value may be blank, and it was this that way causing me the problem.
    I was thinking about this... could you have inputs, disabled="disabled" and value="the text"? The backend could dynamically set whether the input was disabled or not, determining whether the value could be changed... and the set value of a disabled tag can (as far as I know) be highlighted and everything like plain text... though I wonder if we cannot style over browsers' default styling of making stuff so grey you can't read it. Inputs, even with value="" can take up the same amount of space...

    In any case I still wouldn't be happy with loose text. I'd still have like a span or something, letting the back end substitute a real input for the span when the input becomes something editable. The span could also take up x amount of space at all times, if it's not an inline.
    Last edited by Stomme poes; Aug 23, 2009 at 04:44. Reason: spreling

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Inlines can't have those, though for your info I've noticed inputs seem to act like inline-block elements instead of plain inlines, as they can have dimensions and vertical margins.
    That's because inputs (and images) are replaced inline elements
    http://reference.sitepoint.com/css/replacedelements
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Thanks. I never considered form inputs as replacement elements! So they're like Perl's <STDIN> : )


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •