select2: make height of single select match height of multiple select?

Issue

I'm using the amazing select2 jquery plugin. I want to make the height of the single select box match the height of the multiple select box.

I've tried various CSS fixes, including this:

.select2-container .select2-choice {
    height: 36px;
}

but nothing seems to work. Can anyone help?

JSFiddle here: http://jsfiddle.net/vfa4831b/1/

Solution

Add this to your CSS:

.select2-container .select2-selection--single {
    height: 32px;
}

$(".js-example-basic-single").select2();
$(".js-example-basic-multiple").select2();

.select2-container .select2-selection--single {
  height: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

<select style="width: 100px" class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<select style="width: 100px" class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

JSFiddle

Answered By - dave