Alignment and padding for asp:CheckBoxList

Question

I have an asp.net checkboxlist as follows:

Answer 1

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

Answer 2

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:

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

Answer 4

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