Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select "arrow" hidden in bootstrap 3 input group in IE9

I have the following html styled by bootstrap 3 that defines a group of inputs:

<div class="input-group">
    <select class="form-control" >Some options here</select>
    <a class="btn btn-default input-group-addon disabled" title="Legg til" disabled="" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a>
</div>

This gives the following result in most browsers (including IE10):

enter image description here

However in IE9, the "arrow" for the dropdown is missing:

enter image description here

Anyone know a fix for this in IE9?

like image 532
Øyvind Bråthen Avatar asked Dec 09 '13 13:12

Øyvind Bråthen


1 Answers

I found the issue here. It seems that the arrow button is simply hidden below the button with the plus icon. So the select box is the entire width, and the other buttons end up overlying it.

So the fix was to add float:left to the select box, and voila!

like image 174
Øyvind Bråthen Avatar answered Sep 27 '22 22:09

Øyvind Bråthen