如何調整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下拉菜單的高度

回答

相關問題