Bootstrap-select: How to set own height for select?

Created on 15 Mar 2014  路  3Comments  路  Source: snapappointments/bootstrap-select

How to set own height for select?
I set width according "data-width" . But I didn't find "data-height" option.

Most helpful comment

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

width 100%

<select class="selectpicker" data-width="100%">
  ...
</select>

All 3 comments

Many factors are included in the height (line-height, font-size, padding, etc). The best option is to use style or data-style using Bootstrap classes, or your own class. (http://getbootstrap.com/css/#buttons-sizes)

Example:

data-style="btn-default btn-lg"

Bootstrap 3 button styles appear to be broken in 1.6.4. v1.6.3 will properly resize the control height based on a data-style, but v1.6.4 does not. You can recreate the behavior by switching between versions on cdnjs.cloudflare.com.

Example:
data-style="btn btn-default btn-xs"

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

width 100%

<select class="selectpicker" data-width="100%">
  ...
</select>
Was this page helpful?
0 / 5 - 0 ratings