Easily Set Checkbox Item Column Width in CheckListBox

How to easily set the checkbox item column width in the CheckListBox control? I have recently used a CheckListBox and after populating the data, I quickly realized that the checkbox items does not aligned properly on the page. I scour through the CheckListBox properties but I could not find the Column Width property. So I've figure it out that there is no easy way to set the column width of the checkitem. After some thinking I finally manage to find a way to set the column width of the check box item. Here's how:

checklistbox-column-width1

Note: you need to use CSS to accomplish this.

1. In CSS file create the following:

.TOG_CHECK
{
    background-color: #efefef;
    padding: 10px;
}
 
.TOG_CHECK Label
{
    width: 300px;
    background-color: Green;
    padding: 2px;
    font-size:12px;
    font-weight:bold;
}

Remove any of the css property that you don't need, such as font size, weight and padding. The css width property is the property that set the width of the checkitems.
 
2. In ASPX page set the CssClass="TOG_CHECK"
 
<asp:checkboxlist id="cblTOG"  RepeatColumns="2" cssclass="TOG_CHECK" repeatlayout="flow" runat="server"  RepeatDirection="Horizontal" width="700px">
                       <asp:ListItem>Cat</asp:ListItem>
                       <asp:ListItem>dog</asp:ListItem>
                       <asp:ListItem>Kangaroo</asp:ListItem>
                       <asp:ListItem>Crocodile</asp:ListItem>
                       <asp:ListItem>Mouse</asp:ListItem>
                       <asp:ListItem>Dinasour</asp:ListItem>
</asp:checkboxlist>


 
Now check your result on the page and you will see the checkitems are properly aligned.
  

Comments (1)

|203.200.20.xxx |2011-12-06 06:33:42 Haribabu - Below code Working Fine

TOG_CHECK Label
{
width: 300px;
background-color: Green;
position: absolute;
padding: 2px;
font-size:12px;
font-weight:bold;
}

< Prev		Next >