locked
Add vertical Scrollbar in asp.net dropdown list for sharepoint application page. RRS feed

  • Question

  • Hi,

    I have one dropdown list in sharepoint application page.I am getting data in that dropdownlist from Sharepoint list.now the issue is content growing in dropdownlist.Now dropdownlist has 50 items.its not looking good.i want to add scrollbar in that dropdown list.

    Please help me to fix this issue.

    Tuesday, June 7, 2016 9:32 AM

All replies

  • by dropdown list you mean html <select> element or some javascript-based component? (you may check it in page source or using browser developer tools F12) Regular html <select> element adds vertical dropdown automatically. Here how it looks like with 50 items: https://jsfiddle.net/kr4543od/.

    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    Tuesday, June 7, 2016 10:27 AM
  • Hi Masroorul,

    You can set the size of it in the different events dynamically as below:

    <asp:DropDownList id="DropDownList1" runat="server" onmousedown="this.size=5;" onfocusout="this.size=1;" ondblclick="this.size=1;" onclick="this.size=1;">
        <asp:ListItem>Item 1</asp:ListItem>
        <asp:ListItem>Item 2</asp:ListItem>
        <asp:ListItem>Item 3</asp:ListItem>
        <asp:ListItem>Item 4</asp:ListItem> 
        <asp:ListItem>Item 11</asp:ListItem>
        <asp:ListItem>Item 21</asp:ListItem>
        <asp:ListItem>Item 31</asp:ListItem>
        <asp:ListItem>Item 41</asp:ListItem>
        <asp:ListItem>Item 111</asp:ListItem>
        <asp:ListItem>Item 211</asp:ListItem>
        <asp:ListItem>Item 311</asp:ListItem>
        <asp:ListItem>Item 411</asp:ListItem>
        <asp:ListItem>Item 12</asp:ListItem>
        <asp:ListItem>Item 22</asp:ListItem>
        <asp:ListItem>Item 32</asp:ListItem>
        <asp:ListItem>Item 42</asp:ListItem>
        <asp:ListItem>Item 13</asp:ListItem>
        <asp:ListItem>Item 23</asp:ListItem>
        <asp:ListItem>Item 33</asp:ListItem>
        <asp:ListItem>Item 43</asp:ListItem>
    </asp:DropDownList>

    It will show only the top 5 options by default:

    Best regards,

    Patrick

    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Wednesday, June 8, 2016 2:46 AM
  • Hi Patrick,

    The solution you send me is not working.Below is my requirement.

    <asp:DropDownList ID="ddlMediaType" runat="server"></asp:DropDownList>

    I am binding this dropdownlist with sharepoint list data.Now sharepoint list data is growing.I want to apply scrollbar in the dropdownlist.

    Please help me to get the solution.

    Regards,

    Masroorul

    Saturday, June 11, 2016 8:40 AM
  • Hi Masroorul,

    Can you provide the screenshot about how my code works in your application page?

    Also, please show the corresponding HTML code of this control in browser to see if it can provide more details.

    This is the HTML code of the drop down list in my application page:

    Best regards,

    Patrick

    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Tuesday, June 14, 2016 8:06 AM
  • Hi Masroorul,

    Any progress?

    Best regards,

    Patrick


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Thursday, June 16, 2016 8:48 AM