Wigiri Wigiri - 1 month ago 6
AngularJS Question

Ionic Input has some odd inner right padding

I have the following code:

<div class="row no-padding" style="margin-top: 0px;">
<div class="col-67 no-padding">
<label class="item item-input">
<input name="email" ng-model="model.email" placeholder="Email" required type="email">
</label>
</div>
<div class="col no-padding">
<label class="item item-input">
<input name="mobile" ng-model="model.number" placeholder="Mobile" required type="tel">
</label>
</div>
</div>


And I get an input boxes with odd inner right padding:

(Note the .com gets cut off & the number should be 123456789)

Is there a way to reduce this?

I tried using in the input without avail the following:

<input name="email" style="padding-right: -25px; ng-model="model.email" placeholder="Email" required type="email">


Update: I am using Ionic Framework

Answer

Input item on ionic has a padding of 24px. You can remove that padding in this way

.item-input input {
   padding-right: 0;
}
Comments