Alignment and padding for asp:CheckBoxList

Question

I have an asp.net checkboxlist as follows:

    <asp:CheckBoxList ID="CheckBoxList_Genres" runat="server" RepeatColumns="3">
        <asp:ListItem Selected="True">Action</asp:ListItem>
        <asp:ListItem Selected="True">Comedy</asp:ListItem>
        <asp:ListItem Selected="True">Classics</asp:ListItem>
        <asp:ListItem Selected="True">Documentary</asp:ListItem>

[...]

I have two problems: the text does not align with each checkbox, and in some browsers (notably Safari), there is no padding between the checkbox and the text (the text rides up against the checkbox). I am aware of the answer posted here: How to align checkboxes and their labels consistently cross-browsers

However, I can't work out how to implement these styles in the asp:checkboxlist context; I know that a css style can be set for the checkboxlist, but do not think that this allows me to set separate styles for the "label" and the "checkbox". Help would be appreciated.

Answer 1

You should be able to apply the same methods to the CssClass property of your CheckBoxList control as you would a regular checkbox.

Here is some CSS code I used to indent long text next to an ASP.net check box list:

.chkChoice input 
{ 
    margin-left: -20px; 
}
.chkChoice td 
{ 
    padding-left: 20px; 
}

ASP.net:

<asp:CheckBoxList id="ChkWork" runat="server" TabIndex="2" CssClass="chkChoice">

Answer 2

In the properties of the check box list, switch the repeatlayout from flow to table. That will align the columns.