Edges get cut off - Bootstrap Input group


When we use Bootstrap’s input-group with Ionic, the edges of the label get cut off. I created a js fiddle to show the issue http://jsfiddle.net/sonyarouje/zw7s279n/8/

here is the html

<div class="row">
<div class="col-xs-6">
    <div class="input-group"> 
       <span class="input-group-addon"> Find </span>
        <input type="number"  class="form-control" />
        <span class="input-group-addon"> <i class="fa fa-search"></i> </span>

Every thing works fine if we remove type=“number” or type=“text” from the input tag or if we remove ionic.css file.

Any help will be really appreciated.

Sony Arouje


It is really not recommended to use ionic with bootstrap.

There are many equal class names. So they are overwriting each other.

Greetz, bengtler.