So stellen Sie die Höhe des Selectpicker-Dropdowns ein

Question

Ich habe einen Auswahlpicker (Bootstrap) auf meiner Seite, dessen Optionen dynamisch geladen werden. Es hat eine große Anzahl von Liste, aber nicht gut zu sehen. Ich möchte die Höhe des Auswahlpickers reduzieren. Ich habe Inline Style und alles gegeben, aber es spiegelt sich nicht.

dies mein Code

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

Mein js Code

$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); 
     } 
    }); 
}); 

Answer 1

ich es selbst korrigiert ...

Fügen Sie einfach data-size im html

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

Answer 2

Während vielleicht nicht das, was Sie suchen, ist es eine gute Alternative.

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

Es ermöglicht in dem Drop-Down für die Suche, damit die Beseitigung der Notwendigkeit, die Höhe der Dropdown einzustellen, und es funktioniert mit Bootstrap.

Answer 3

Mit Bootstrap Select, hat data-size nicht für mich arbeiten. Ich muss CSS damit überschreiben:

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

Ändern Sie die Größe, wie Sie möchten.