【问题标题】:How to make a scrollbar in bootstrap dropdown?如何在引导下拉菜单中制作滚动条?
【发布时间】:2020-03-27 21:21:51
【问题描述】:

如何在 bootstrap 4 下拉选择中创建滚动条。在我的情况下,如果文件太多,那么下拉菜单将不会完全加载。因此,我计划修复单击下拉菜单时仅显示 5 个文件并具有滚动条的问题。

HTML

<div class="pd-ltr-20 customscroll customscroll-10-p height-auto xs-pd-20-10">
    <div class="min-height-200px">
        <div class="mb-30">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <small class="form-text text-muted">Select ES Value</small>
                        <div class="custom-file">
                            <select class="font-14 selectpicker form-control" data-width="100%">
                                <option value="">- ES VALUE -</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】:

  • 您似乎没有使用 Bootstrap 下拉菜单

标签: html css drop-down-menu bootstrap-4


【解决方案1】:

给&lt;select&gt; 标记一个高度并为其添加溢出:自动。

【讨论】:

    【解决方案2】:

    您似乎正在使用 Bootstrap 4 Selectpicker 插件。在这种情况下,下拉菜单会自动调整到视口高度。要覆盖,请将自定义类添加到选择 (mh),然后使用 !important... 设置 max-height...

    /* to set custom max height */
    .mh .dropdown-menu {
        max-height: 100px;
    }
    
    <select class="selectpicker mh" data-live-search="true">
         <option data-tokens="">Custom max height using CSS</option>
         <option">More...</option>
         <option">More...</option>
         <option">More...</option>
         <option">More...</option>
    </select>
    

    Demo

    【讨论】:

    • 是的,我正在使用 selectpicker 插件,但是,您上面的解决方案不起作用。还有其他想法吗?我在我的 CSS 中创建了 .mh 类并添加到 HTML 中。我没有使用数据令牌。
    【解决方案3】:

    将您的列表放入 DIV 标记中,并将 DIV 样式设置为 overflow:auto 并将 DIV 的高度设置为固定高度。

    <select name='menu' class="myDropDown">
      <option value='1'>first item</option>
      <option value='2'>second item</option>
      <option value='3'>third item</option>
      <option value='4'>fourth item</option>
      <option value='5'>fifth item</option>
      <option>........
      <option>........
      //I have many options.....
    </select>
    
    <style>
    .myDropDown
    {
       height: 50px;
       overflow: auto;
    }
    </style>
    

    【讨论】:

      【解决方案4】:

      给&lt;option&gt;标签高度和溢出。

      option{
        height: 50px;
        overflow: auto;
      }
      <select>
        <option value="">- ES VALUE -</option>
        <option value="">- 1 -</option>
        <option value="">- 2 -</option>
        <option value="">- 3 -</option>
        <option value="">- 4 -</option>
        <option value="">- 5 -</option>
        <option value="">- 6 -</option>
        <option value="">- 7 -</option>
        <option value="">- 8 -</option>               
        <option value="">- 9 -</option>               
        <option value="">- 10 -</option>               
        <option value="">- 11 -</option> 
        <option value="">- 12 -</option>
        <option value="">- 13 -</option>
        <option value="">- 14 -</option>
        <option value="">- 15 -</option>
        <option value="">- 16 -</option>
        <option value="">- 17 -</option>
        <option value="">- 18 -</option>
        <option value="">- 19 -</option>
        <option value="">- 20 -</option>
        <option value="">- 21 -</option>
        <option value="">- 22 -</option>
        <option value="">- 23 -</option>
        <option value="">- 24 -</option>
        <option value="">- 25 -</option>
      </select>

      【讨论】:

        猜你喜欢
        • 2016-12-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-01-07
        • 2010-10-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多