Search code examples
javascriptjqueryhtmlbootstrap-selectpicker

How to set line-height of selectpicker


Trying to shrink the height of select picker by adjusting the line-height. However, I don't know how to access the select picker button to shrink the line height because it gets generated dynamically. This is the code:

<select id="views" class="form-control selectpicker " >
    <option> Sample </option>
</select>

If I look at inspect element I can see the button to assign the line height:

<div class="btn-group bootstrap-select form-control">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="views" title="all" aria-expanded="false"><span class="filter-option pull-left">all</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
</div>

before after


Solution

  • The solution was to apply the following css

    #view_group .btn.dropdown-toggle.btn-default{
    line-height: 10px
    }
    

    This targets the button from the selectpicker within a specific div so that it doesn't get applied to all selectpickers