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.

score 17 · Accepted Answer · answered Nov 05 '09 at 16:45

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

score 1 · Answer 2 · answered Oct 12 '13 at 08:06

1

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"

answered Oct 12 '13 at 08:06

Shaahin

962
2
12
20

This appears to be a duplicate of the original answer. – Mmm Nov 11 '15 at 15:51

score 1 · Answer 3 · answered Oct 20 '20 at 19:47

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:

score 1 · Answer 4 · answered Dec 29 '11 at 19:47

1

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

answered Dec 29 '11 at 19:47

Xena Olson

11
1

1

Also, make sure you stretch the width of the cbl until the 3 columns are aligned. – Xena Olson Dec 29 '11 at 19:50

Alignment and padding for asp:CheckBoxList

4 Answers4

Linked