How to adjust height of the selectpicker dropdown

Question

I have a selectpicker (bootstrap) in my page which options are loading dyanmically. It has a large number of list but not good to see. I want to reduce the height of the selectpicker. I have give inline style and all but it is not reflecting.

this is my code

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

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

refer http://stackoverflow.com/questions/21111652/how-do-you-set-the-max-height-of-an-expanded-chosen-element-jquery-plugin — Ish, Sep 22 '16 at 04:27
Use `max-height` for that. My personal choice is to use media queries and have a `px` max height for desktop-type devices and a `vh` value for mobile devices. Also, if you have more than 20 children, consider using a [select2](https://select2.github.io/) or [autocomplete](https://jqueryui.com/autocomplete/) solution. — tao, Sep 22 '16 at 04:47

score 65 · Accepted Answer · edited Dec 18 '17 at 17:49

65

I corrected it by myself...

Just add data-size in the html

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

edited Dec 18 '17 at 17:49

Jack Moody

1,590
3
21
38

answered Sep 22 '16 at 05:03

S M

3,133
5
30
59

Didn't work for me. Using select element with Bootstrap 3. Here's a codePen example that demonstrates it – https://codepen.io/bencarp/pen/LdvOem – Ben Carp Apr 12 '18 at 10:47
2

Very Thanx Dude – Nurbek Nurjanov Jan 15 '19 at 06:48

Fred K · Answer 2 · 2018-02-27T07:58:58.393

13

Using Bootstrap Select, data-size doesn't work for me. I need to override CSS with this:

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

Change the size as you like.

edited Feb 27 '18 at 07:58

answered Feb 26 '18 at 21:19

Fred K

13,249
14
78
103

Is that a bootstrap dropdown? – S M Feb 27 '18 at 05:03
@SoumyaMohan it's the dropdown created by Bootstrap Select library (see link in the answer) – Fred K Feb 27 '18 at 07:59
in the given link, if we check options https://silviomoreto.github.io/bootstrap-select/options/ we can see that `size` attribute will do the job – S M Feb 28 '18 at 11:13
Working docs link: https://developer.snapappointments.com/bootstrap-select/options/ – Wotuu Jul 08 '23 at 20:10

score 4 · Answer 3 · answered Feb 27 '20 at 09:01

4

I recently spent an hour trying to find how to restrict the height of a dropdown. Turns out the size attribute for select tags is set to 'auto' in the javascript file. For me, it was around line 369.

The solution is simple:

Set size: '10' //or however many options you want to be listed

$('.selectpicker').selectpicker({
   size: '10'
});

answered Feb 27 '20 at 09:01

I added @am-evs I tested you code but isn't giving any response. What's the matter? ` – Bishwas Bhandari Oct 04 '20 at 12:45

score 3 · Answer 4 · answered Sep 22 '16 at 04:54

3

While maybe not what you're looking for, it is a great alternative.

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

It allows for searching within the dropdown, therefore removing the need to adjust the height of the dropdown, plus it works with bootstrap.

answered Sep 22 '16 at 04:54

Hi i got it from the link u shared.. set `data-size="5"` – S M Sep 22 '16 at 05:02
No... It just give a hint.. I have added the answer.. but upvoted.. Thanks again – S M Sep 22 '16 at 05:04
link is not available anymore – mhn_namak Mar 05 '20 at 01:43

score 1 · Answer 5 · answered Nov 05 '20 at 05:03

you can use form-control-sm on select tag

     <select class="form-control form-control-sm" id="processdef">
            <option>Process Def1</option>
            <option>Process Def2</option>
            <option>Process Def3</option>
            <option>Process Def4</option>
            <option>Process Def5</option>
      </select>

How to adjust height of the selectpicker dropdown

5 Answers5