1

I have an input on my application for filtering the results below. Once a user types in any characters it uses angular to filter the results, but a clickable X, which is a font awesome icon, appears inside the input so they can clear it that way. In Chrome and Firefox it works fine (renders while deployed) but in IE it appears twice.

Chrome/Firefox:

enter image description here

Internet Explorer:

enter image description here

The cooresponding code is:

<div class="form-group has-feedback"
    style="margin: 0">
  <input type="text"
      ng-model="vm.typeFilter"
      ng-change="vm.updateFilter()"
      class="form-control"
      placeholder="Type"
      style="padding-right:30px;">
  <span ng-if="vm.typeFilter"
      ng-click="vm.typeFilter = ''; vm.updateFilter();"
      class="fa fa-times fa-lg form-control-feedback"
      style="cursor: pointer; pointer-events: all; margin-top: 10px;">
  </span>
</div>

Not too sure what is going on as I'm new to cross-browser development. I Have tried closing the </input> tag outside of the span to see if that would help but no. Also tried closing the input before the span, but same result.

erp
  • 2,950
  • 9
  • 45
  • 90

1 Answers1

2

I suspect this has to do with de default input clear functionality IE sometimes provides:

::-ms-clear pseudo-element

Try changing the fontawesome class to something else and see if both icons change. I think only the right will change, while the left one will stay a cross.

If this is indeed the case, check here for a solution:

https://stackoverflow.com/a/14007839/1295183

.has-feedback>input.form-control::-ms-clear {
  display: none;
}
Community
  • 1
  • 1
klmdb
  • 765
  • 1
  • 10
  • 21
  • Good find. I don't use IE so I never knew that was a thing. I changed `fa-times` to `fa-plus` and the other `x` remained. So if I use that above css, I should then apply that class to the inputs? – erp Dec 21 '16 at 20:20
  • Yes the pseudo-element selector should be applied to the input. Just to make sure the X is only hidden for inputs that have a icon added by bootstrap, I modified my answer with the correct selector. – klmdb Dec 21 '16 at 20:24