ASP.Net Code, CSS Code, DHTML Code, JavaScript Code

Create a Scrolling Check Box List

If you are using the CheckBoxList control in ASP.Net, or you just have a bunch of options for users to check, a large number of check boxes options can take up a lot of room on your web page. Also, you may have a <select> with a lot of options, you need to allow multiple selects, but it also takes up a lot of room, and having the user hold CTRL to select multiple items is a nuisance. Well, this little DHTML idea will allow you to combine many checkboxes into a pseudo drop-down list. It makes for one slick and user-friendly solution!

So basically, you just need to place the CheckBoxList, or any list for that matter in a <div>. The div will have an initial height of a few pixels, just enough to see the 'title'. When you move the mouse over the title, the CheckBoxList will "drop down" like a menu. We will accomplish that by changing the height. Also, we will give it a <select> menu feel by adding a scrollbar.

You can see an example of this at this dental search engine. It's under advanced search.

Here's the ASP.Net code to generate the list. You can use any other language of course, and put whatever other list in the <div you'd like:


<div id="list_countries">Please choose the countries to search:<br />
  <asp:CheckBoxList ID="ListCountries" DataSourceID="DSCountries" DataValueField="id"  DataTextField="specialty" runat="server" /> 
  <asp:SqlDataSource ID="DSCountries" runat="server" ConnectionString="<%$ ConnectionStrings:Conn1 %>" SelectCommand="SELECT [id], [name] FROM [countries] ORDER BY [name]" />
</div>

Now here's the CSS code to give this list a DHTML drop down list feel. The one magical little CSS property that makes this work beautifully is the overflow-y property:


#list_countries, .list_collapse
{
    position: absolute;
    background: #A8C5E1;
    top: 250px;
    left: 410px;
    width: 100px;
    height: 15px;
    overflow-y: scroll;
    border: 1px solid #666;
    z-index: 10;
    padding: 5px;
    text-align: left;
    display:block;
}

#adv_practices:hover, .list_expand
{
    height: 180px;
}

By adding "overflow-y: scroll;", it adds a scrollbar to the right, so that you can scroll down to see all addtional options. By setting the absolute position and the z-index, we make this pop down and hover over all other elements.

Unfortunately until IE7, this won't work in IE without additional code. You have to add some additional JavaScript code to get the hover to work. The JavaScript will change the CSS class dynamically, creating a pseudo hover affect. It would look like this:


<div id="list_countries" onmouseover="this.className='list_expand';" onmouseout="this.className='list_collapse';">
Share

2 Comments

  1. Hi, the link to the dental-page doesn't work anymore. Do you have an example of a website where this list of checkboxes is used?
    Thanks
    Peter

  2. thanks Justin! I like your solution.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image