Adding scroll bars to the checkbox list in ASP.Net

This piece of code help us to add the scrollbar to the checkbox list control in ASP.NET and also it applies alternate colors and styles for the rows or Items of the check box List, which looks like Displaing the data/content in Table.

Place the CheckBoxList control inside the


<div id="list_checkboxs" onmouseover="this.className='list_expand';" onmouseout="this.className='list_collapse';">
<asp:CheckBoxList CssClass="checkboxList" style="overflow:scroll;"
BorderStyle="None" width="100px" runat="server" >
<asp:ListItem Text="Apply for All" />
<asp:ListItem Text="18017" />
<asp:ListItem Text="18018" />
<asp:ListItem Text="180" />

Define the styles:

#list_checkboxs, .list_collapse
position: absolute;
width: 115px;
height: 40px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid #666;
z-index: 10;
padding: 5px;
text-align: left;

#list_checkboxs:hover, .list_expand
height: 60px;
.ListRow {
background-color: #0000FF;
.chkList {
width: 10px;
height: 10px;
padding: 0 5px 0 0;
border: 1px solid #ccc

Add JQuery for applying alternate colors




No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: