Как сделать высоту выпадающего меню select2 такой же, как у встроенной кнопки?

Question

Я пытаюсь измерить высоту выпадающего меню, чтобы она соответствовала кнопке рядом с ним, но я не знаю, где применить стиль, или даже если это возможно.

<div class="row m-3">
  <div class="col-12">
    <div class="form-inline">
      <div class="input-group">
        <select id="theSelect">
        <option value="1">Number One</a>
        <option value="2">Number Two</a>
        <option value="3">Number Three</a>
      </select>
    </div>
    <a href="#" class="btn btn-info" role="button">Add</a>
  </div>
</div>

Вот codepen , показывающий проблему.

Answer 1

Вы можете добавить следующий CSS для управления высотой или шириной:

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

классы .select2-container, .select2-selection--single, .select2-selection__rendered, .select2-selection__arrow отображаются при запускеselect2 через JQuery.