Wigiri Wigiri - 1 year ago 75
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">
<div class="col no-padding">
<label class="item item-input">
<input name="mobile" ng-model="model.number" placeholder="Mobile" required type="tel">

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 Source

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

.item-input input {
   padding-right: 0;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download