Geek Answers Handbook

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

I have the following html created by bootstrap 3 which 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 there is no arrow for the drop-down list:

enter image description here

Does anyone know a fix for this in IE9?

+6
source share
3 answers

I found a problem here. It seems that the arrow button is just hidden under the plus sign button. Thus, the selection field is the entire width, and the remaining buttons exceed it.

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

+4
source

You should use .input-group-btn to avoid this problem:

 <div class="container"> <form role="form"> <div class="form-group"> <div class="input-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="input-group-btn"> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-plus-sign"></i></a> </span> </div> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>
0
source

You just need to remove the registration in the select tag. First you need conditional classes for IE9.

 <!--[if IE 9 ]><html class="ie9"><![endif]-->

Then, just indent the select tags.

 .ie9{ select.form-control{ padding: 0 !important; } }
0
source

More articles:


All Articles