如何调整selectpicker下拉菜单的高度

我在我的页面中有一个selectpicker（bootstrap），其中的选项正在加载。它有很多列表，但不好看。我想减少selectpicker的高度。我已经提供了内联风格和所有内容，但并不反映。如何调整selectpicker下拉菜单的高度

这是我的代码

<select class="selectpicker" data-dropup-auto="false" id="estType" name="estType"> 
    <option selected disabled value="0">Select</option>' 
</select>

我的js代码

$function ({ 
    $.ajax({ 
     datatype: "json", 
     type: "GET", 
     async: false, 
     url: "Establishment/GetPrePopulationDetails", 
     success: function (result, success) { 
      var esttypes = $.map(result['EstablishmentTypes'], 
       function (key, value) { 
        return $('<option>', { value: value, text: key }); 
       }); 
      $('#estType').append(esttypes); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.error(xhr.status); 
      console.error(thrownError); 
     } 
    }); 
});

来源

2016-09-22 Soumya Mohan

参考http://stackoverflow.com/questions/21111652/how-do-you-set-the-max-height-of-an-expanded-chosen-element-jquery-plugin – Ish

使用'max-height'为了那个原因。我个人的选择是使用媒体查询，并且对桌面型设备具有“px”最大高度，对于移动设备具有“vh”值。另外，如果您有超过20个孩子，请考虑使用[select2]（https://select2.github.io/）或[autocomplete]（https://jqueryui.com/autocomplete/）解决方案。 –

我自己纠正它...

在HTML

<select class="selectpicker" data-dropup-auto="false" data-size="5" id="estType" name="estType"> 
    <option selected disabled value="0">Select</option>' 
</select>

来源

2016-09-22 05:03:23

虽然也许不是你要找什么，这是一个伟大的选择。

https://silviomoreto.github.io/bootstrap-select/examples/#live-search

它允许下拉列表中进行搜索，因此不再需要调整下拉列表的高度，再加上它与引导工作。

来源

2016-09-22 04:54:31 harryparkdotio

嗨，我从链接u共享..它设置'data-size =“5”' –

甜，因为标记为正确。 – harryparkdotio

不...它只是提示..我已经添加了答案..但upvoted ..再次感谢 –

使用Bootstrap Select只需添加data-size，data-size并不为我工作。我需要覆盖CSS：

div.dropdown-menu.open{ 
    max-height: 314px !important; 
    overflow: hidden; 
} 
ul.dropdown-menu.inner{ 
    max-height: 260px !important; 
    overflow-y: auto; 
}

更改大小，只要你喜欢。

来源

2018-02-26 21:19:42

这是一个引导下拉？ –

@SoumyaMohan它是由Bootstrap Select库创建的下拉列表（请参阅答案中的链接） –

如果我们检查选项https://silviomoreto.github.io/bootstrap-select/options/我们可以看到'size '属性将完成这项工作 –

如何调整selectpicker下拉菜单的高度

回答

相关问题