How do I change select2 box height

Question

I love the select2 box from https://github.com/ivaynberg/select2 I am using the format: option to format each element, and it looks great.

Everything is fine except the selected element is bigger than the height of the select box due to an image.

I know how to change the width, but how do I change the height so that AFTER the element is selected, it shows the full thing (about 150px)

Here is my initiation:

<script>     $("#selboxChild").select2({         matcher: function(term, text) {              var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text);              return t.toUpperCase().indexOf(term.toUpperCase()) >= 0;          },         formatResult: formatChild,         formatSelection: formatChild,         escapeMarkup: function(m) {             return m;         }     }); </script> 

and here is my select box

<select id="selboxChild" style="width: 300px; height: 200px">     <option value="">No child attached</option> </select> 

To Clarify: I do NOT want the Height of each option to change I am looking for the select box to change height after you select a child.

So when the page first loads it says "No child selected" When you click the drop down and select a child you see the child's image. NOW i need the select box to expand! Otherwise the picture of the child is cut off.

Does anyone understand?

Answer 1

You should add the following style definitions to your CSS:

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