...

View Full Version : How can a <label> completely fill its parent <td>?



shlagish
06-19-2010, 05:14 AM
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>





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.

abduraooft
06-19-2010, 08:29 AM
<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 ).

label { border: 1px solid #f00; display:block; line-height: 2; }

PS: 1) Add a suitable DOCTYPE (http://www.alistapart.com/articles/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/prettyaccessibleforms/

shlagish
06-19-2010, 06:38 PM
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:



<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>

Apostropartheid
06-19-2010, 08:06 PM
Have you tried zeroing all padding and margins on the page?

shlagish
06-19-2010, 08:17 PM
What would zeroing all the margins and paddings do?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum