CODEWITHSUNDEEP
c#asp.net
mck
mck

Reputation: 988

How do i add vertical scroll bar in asp Dropdown list?

My code is 

<asp:DropDownList ID="ddlFrom" runat="server" CssClass="From"></asp:DropDownList>

and my css code is .From{ width:250px;height:25px}

Height can not be so large because there are large number of items in it. How do I add a vertical scroll bar to my drop down ?

Upvotes: 1

Views: 5606

Answers (3)

Sagar Kute
Sagar Kute

Reputation: 171

Option 1. Remove the height of the dropdown so that it will grow automatic

Option 2. If it is in a table cell or something which does not allow it to grow then put it in a div like below

<div style="overflow-y:scroll; height:50px;
overflow: -moz-scrollbars-horizontal;">
<select....></select>
</div>

Here are some example click here

Upvotes: 1

Clinton Ward
Clinton Ward

Reputation: 2511

There are a few 3rd party controls out there in the web, and you could easily bing them. I just put a very simple workaround that involves DropDownExtender (of AJAX ControlToolkit), TextBox, ListBox, and a few lines of Javascript.

Here TextBox will hold the selected value of the listbox. My ASPX code below:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" Text="Select your item" CssClass="MyTextBox"></asp:TextBox>
            <div style="padding: 4px;" id="ItemsDiv" runat="server">
                <asp:ListBox ID="ListBox1" runat="server" onclick="callme()" CssClass="MyDropDown" Rows="6">
                </asp:ListBox>
            </div>
            <asp:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"
                DropDownControlID="ItemsDiv">
            </asp:DropDownExtender>
        </ContentTemplate>
    </asp:UpdatePanel>
<script>
   function callme() { 
           element = document.getElementById("ListBox1"); 
            str = element.options[element.selectedIndex].value; 
            document.getElementById("TextBox1").value = str; 
        } 
</script>

Upvotes: 1

varun
varun

Reputation: 4650

In the css class add overflow-y:auto, when the options length increases beyon 25px, you will get a scrollbar in y-axis of your dropdpwn

Upvotes: 0

Related Questions