This question may seem straightforward, but I have not been able to find a specific answer here or through Google search.
Within an ASP.Net CheckBoxList
, I have a dropdown selection list implemented using an overlaid div.
The default HTML generated for the CheckBoxList looks like this:
<table id="MainContent_DropDownCheckBoxList4_checkBoxList">
<tbody><tr>
<td><input type="checkbox" value="ALL" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$0" id="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdownlabel">All</label></td>
</tr><tr>
<td><input type="checkbox" value="0" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$1" id="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdownlabel">Item 0</label></td>
</tr><tr>
<td><input type="checkbox" value="1" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$2" id="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdownlabel">Item 1</label></td>
</tr><tr>
<td><input type="checkbox" value="2" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$3" id="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdownlabel">Item 2</label></td>
</tr><tr>
<td><input type="checkbox" value="3" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$4" id="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdownlabel">Item 3</label></td>
</tr>
</tbody></table>
The issue is that the labels are only as wide as the text within them, whereas I want the entire row to be selectable. My control/table has a fixed width so no need to calculate lengths.
Previous solutions involving display: block
did not work on all browsers as expected, causing the text to appear below the checkbox. Can someone provide a solution?
How can I make the label take up the remaining space in the line? a JQuery solution is acceptable (preferably since the control heavily uses JQuery), but please ensure it works across all browsers. The checkboxes and labels already have classes assigned via JQuery (dropdowncheck
for checkboxes and dropdownlabel
for labels).
Simple workaround (based on Henrik's answer):
.dropdowncheck
{
float: left;
}
.dropdownlabel
{
display: block;
}
As long as the checkboxes and labels have assigned classes (via JQuery), this solution should work perfectly.