Edges get cut off - Bootstrap Input group

ionic-v1
1

Hi,
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>
    </div>
</div>

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.

Regards,
Sony Arouje

2

It is really not recommended to use ionic with bootstrap.

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

Greetz, bengtler.