CODEWITHSUNDEEP
ionic-frameworkionic3
Vishal Chauhan
Vishal Chauhan

Reputation: 11

How to remove unnecessary padding in ion-item with ion input in ionic-3?

How to remove unnecessary padding in ion-item with ion input in ionic-3 ?

<ion-row align-items-center>
   <ion-col col-3></ion-col>
   <ion-col text-right  no-padding col-4.5> 
      Canister Width <p>(C.W.)</p>:
   </ion-col>
   <ion-col no-lines ion-item no-padding>
      <ion-input></ion-input>
   </ion-col>
</ion-row>

Upvotes: 1

Views: 3316

Answers (3)

shurvirpm
shurvirpm

Reputation: 81

add below code into your css

ion-item{padding:0 !important}

or

you can add inline css in HTML file

<ion-row align-items-center>
   <ion-col style="padding:0"> 
      Canister Width <p>(C.W.)</p>:
   </ion-col>
</ion-row>

Upvotes: 0

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

You can't remove a padding from item in the tag with the ion-item attribute because it's not the ion-item who has a padding, but the item-inner child who is generated inside.

That's why no-padding doesn't works, but you can simply do this with css like this

.item .item-inner {
  padding-left: 0px;
}

Hope this helps.

Upvotes: 2

kalememre
kalememre

Reputation: 426

try this ?

 <ion-row align-items-center no-padding>

or you can add <div no-padding> ?

Upvotes: 0

Related Questions