wake-up-neo.com

So passen Sie die Höhe des Auswahlfelds an

Ich habe auf meiner Seite einen selectpicker (bootstrap), dessen Optionen dynamisch geladen werden. Es hat eine große Anzahl von Listen, aber nicht gut zu sehen. Ich möchte die Höhe des Selectpickers reduzieren. Ich habe Inline-Stil und alles, aber es reflektiert nicht.

das ist 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);
        }
    });
});
javascriptjqueryhtmlcsstwitter-bootstrap
7
Soumya Mohan

Ich habe es von mir selbst korrigiert ... 

Fügen Sie einfach data-size in der HTML-Datei hinzu

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

Vielleicht ist es nicht das, wonach Sie suchen, aber es ist eine großartige Alternative.

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

Es ermöglicht das Suchen innerhalb des Dropdown-Menüs, wodurch die Höhe des Dropdown-Menüs nicht mehr angepasst werden muss, und es funktioniert auch mit Bootstrap.

3
harryparkdotio

Mit Bootstrap Select , data-size funktioniert bei mir nicht. Ich muss CSS mit diesem ü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 nach Ihren Wünschen.

2
Fred K