6

I'm using twitter bootstrap classes in my angular project. For a dropdown menu the styles work fine in Chrome but when I load it into IE 11, it does not style properly. In particular the dropdown arrow button.

Has anyone else had this issue with IE? How would I resolve this? Please see a comparison photo below of my issue.

enter image description here

My html section below as well, any comments welcome thanks in advance!

 <select class=" btn btn-default"  ng-options="obj for obj in data.finding"
                      ng-model="gapSection.finding"  >
                      <option value="">Please select</option>
</select>
Ka Tech
  • 8,196
  • 10
  • 48
  • 72

4 Answers4

3

I just solved for IE using :

select::-ms-expand {
    border:none;
    background:#fff;
}

Source

Community
  • 1
  • 1
Shubh
  • 6,517
  • 8
  • 46
  • 80
2

Add this on your css file

select::-ms-expand {
  display: none;
}
Niet
  • 37
  • 2
  • You may want to explain what your code does / why you think it will resolve the problem (maybe link to some sources?). – Okku Jun 30 '15 at 13:43
1

I think you should use bootstrap class form-control on HTML tag select for it to render correctly:

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
Alex M
  • 2,610
  • 7
  • 26
  • 33
milindrev
  • 11
  • 1
0

Bootstrap 3 drops support for Internet Explorer 7, but you can add it back by simply adding conditional CSS called bootstrap-ie7.css.

here is the download link:: https://github.com/coliff/bootstrap-ie7

Sarath
  • 2,268
  • 1
  • 11
  • 24