Alignment and padding for asp:CheckBoxList

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 2

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

Method 3

some of checkboxlist items, has label, for space between text and the item, for example checkbox, you have to give type of item in Css.

Exlampel:

.myCheckBoxList label 
{  
    padding-right: 5px; 
}

and give che checkboxlist class like this:

 CssClass="myCheckBoxList"

Method 4

One of the properties of asp:CheckBoxList is RepeatLayout=”Table”. This will result to a table-like list where all is checkboxes are aligned.

<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" Width="100%">

Output:

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0