选择框中的Scollbar未显示

Question

我尝试将下拉滚动。但事情并没有成功。

所以这是模型：

<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>

现在我尝试使用CSS：

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

但它没有用。我将样式应用于div，但保留了下拉选项。

然后我尝试了：

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

但也弄乱了用户界面。现在选择选项本身有高度，而不是选项菜单。

如何解决？

感谢。

Answer 1

如果您正在寻找Scrollable Dropdown菜单和Select框，您可以使用bootstrap： 有一个名为“可滚动菜单”的类。使用它，您将获得下拉菜单的Scrollable菜单 以供参考： http://www.bootply.com/86116

Answer 2

要为选择框设置滚动，您必须设置max-height和overflow属性。请试试这个。

{{1}}

我认为这将解决您的问题。

Answer 3

您需要使用尺寸属性

展开下拉列表

<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 >

here工作示例