Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How can a <label> completely fill its parent <td>?

    Here is the relevant code (doesn't work):
    Code:
    <html>
    <head>
    <title>testing td checkboxes</title>
    <style type="text/css">
    td { border: 1px solid #000; }
    label { border: 1px solid #f00; width: 100%; height: 100% }
    </style>
    </head>
    <body>
    <table>
    <tr><td>Some column title</td><td>Another column title</td></tr>
    <tr><td>Value 1<br>(a bit more info)</td><td><label><input type="checkbox" /> &nbsp;</label></td></tr>
    <tr><td>Value 2</td><td><input type="checkbox" /></td></tr>
    </table>
    </body>
    </html>



    Here is the relevant code (doesn't work):

    <html>
    <head>
    <title>testing td checkboxes</title>
    <style type="text/css">
    td { border: 1px solid #000; }
    label { border: 1px solid #f00; width: 100%; height: 100% }
    </style>
    </head>
    <body>
    <table>
    <tr><td>Some column title</td><td>Another column title</td></tr>
    <tr><td>Value 1<br>(a bit more info)</td><td><label><input type="checkbox" /> &nbsp;</label></td></tr>
    <tr><td>Value 2</td><td><input type="checkbox" /></td></tr>
    </table>
    </body>
    </html>

    The reason is that I want a click anywhere in the table cell to check/uncheck the checkbox.
    I tried using display: block; but that only works for the width, not for the height
    By the way, no javascript solutions please, for accessibility reasons.
    Shawn

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <label> is an inline element and thus it doesn't recognise width or height applied to it. Changing its display property to block would give you the desired result (by default, all block level elements will stretch to the 100% width of its container and thus no explicit width is required ).
    Code:
    label { border: 1px solid #f00; display:block; line-height: 2; }
    PS: 1) Add a suitable DOCTYPE to your code at the top.
    2) Using tables for making layout is very bad. See a good alternate at http://www.alistapart.com/articles/p...cessibleforms/
    Last edited by abduraooft; 06-19-2010 at 08:31 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    1) This is an short example just to show the problem. The real page does have an appropriate DOCTYPE. Thanks for mentioning though!
    2) Again, in the actual page where the problem lies, I'm presenting tabular data, so I'm using a table: simple as that.

    Apart from that, simply setting display: block doesn't always work. Consider this example:

    Code:
    <html>
    <head>
    <title>testing td checkboxes</title>
    <style type="text/css">
    td { border: 1px solid #000; }
    label { border: 1px solid #f00; display:block; line-height: 3; }
    </style>
    </head>
    <body>
    <table>
    <tr><td>Some column title</td><td>Another column title</td></tr>
    <tr><td>Here, value 1 takes up a whole bunch of lines because it's simply bigger than expected. The content of this table is actually found in a database and can't be predicted precisely enough to ensure that it will stay on a sigle line, or even two. So if I decide to write line-height: 3, it will be too high when the data in the left column only needs one line and too small when the data in the left colomn needs more than 3 lines (as this line does.. or if it doesn't, just try shrinking your window's width a bit and you'll see the problem)<td><label><input type="checkbox" />&nbsp;</label></td></tr>
    <tr><td>Value 2: short</td><td><label><input type="checkbox" />&nbsp;</label></td></tr>
    </table>
    </body>
    </html>
    Shawn

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Have you tried zeroing all padding and margins on the page?

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What would zeroing all the margins and paddings do?
    Shawn


  •  

    Tags for this Thread

    Posting Permissions

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