Login/Register
Select "arrow" hidden in bootstrap 3 input group in IE9
Asked Answered
csstwitter-bootstraptwitter-bootstrap-3internet-explorer-9
C

3

6

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?

Cule answered 9/12, 2013 at 13:5 Comment(0)
C
4

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!

Cule answered 9/12, 2013 at 13:40 Comment(1)
You rock. Thanks for posting your answer to your question – Stull
B
0

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

<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>
Bacteroid answered 9/12, 2013 at 16:27 Comment(0)
B
0

You just need to remove padding on the select tag. You'll first need conditional classes for IE9.

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

Then just simply remove the padding on the select tags.

.ie9{
   select.form-control{
     padding: 0 !important;    
   }
}
Barye answered 23/8, 2016 at 21:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.