Scollbar in select box not appearing

Question

I tried to make a drop down scrollable. But things did not work out.

So here is the mockup :

<div class="form-group">

    <div id="fixedHeightDropDownContainer">
        <label class="control-label">@Resources.IntrusionGroup</label>
        <select name="intGroup1" id="intGroup1" class="form-control" tabindex="10" data-bind="options: $root.intGroups, optionsText: 'Name', optionsValue: 'Id',optionsCaption: '--Select--',value:$data.IntGroupName"></select>
    </div>
    <a href="#" class="ispicon ispicon_plus" data-toggle="modal" data-target="#addSchedule" data-bind="click:$parent.addGroup" title="Create New">Create New</a>

</div>

Now I tried in CSS :

div#fixedHeightDropDownContainer {
    height: 100px !important;
    width:auto !important;
    overflow-y:auto !important;
    background-color:red;
}

But it did not work . I applied the style to the div but left the drop down options as it is.

Then I tried :

#intrusionGroup1{
    height: 100px !important;
    width:auto !important;
    overflow-y:auto !important;
    background-color:red;
}

But also messed the UI. Now select option itself had the height , not the option menu.

How can it be fixed ?

Thanks.

It is not possible. You have to do with some multiselect plugin or writing jquery code for it. — priya_singh, Sep 29 '16 at 10:55
take a look for this post http://stackoverflow.com/questions/24119643/html-select-tag-show-verticle-scroll-with-10-option — Abhishek Pandey, Sep 29 '16 at 11:12

Asnau Nauticas · Answer 1 · 2016-09-29T11:09:25.007

0

You can use bootstrap if you are looking for Scrollable Dropdown menu and Select box: There's a class named "scrollable-menu". Use it and you will get Scrollable menu for your dropdown for reference: http://www.bootply.com/86116

edited Sep 29 '16 at 11:09

answered Sep 29 '16 at 11:01

Asnau Nauticas

197
1
4
20

there is difference between `select-box` and `dropdown-menu`, read question properly – Abhishek Pandey Sep 29 '16 at 11:03
Yeah but the bootstrap's "scrollable-menu" works for both select-box and dropdown-box if you know bootstrap – Asnau Nauticas Sep 29 '16 at 11:08
You must provide an example in your answer. – Abhishek Pandey Sep 29 '16 at 11:11

score 0 · Answer 2 · answered Sep 29 '16 at 11:09

0

In order to set scroll for select box you have to set the max-height and the overflow property. Please try this.

select#intGroup1 {
    max-height: 100px;
    overflow: scroll !important;
}

I think this will solve your issue.

answered Sep 29 '16 at 11:09

Nitheesh

19,238
3
22
49

score 0 · Answer 3 · answered Sep 29 '16 at 11:12

You need to expand dropdown using size attribute

<select size="5">
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Mango</option>
    <option value="4">Grapes</option>
    <option value="5">Olives</option>
    <option value="6">Jalapeno</option>
    <option value="7">Potato</option>
    <option value="8">Tomato</option>
    <option value="9">Garlic</option>
  < /select >

And here working example

Scollbar in select box not appearing

3 Answers3