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.
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">
In the properties of the check box list, switch the repeatlayout from flow to table. That will align the columns.
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"