CODEWITHSUNDEEP
cssangularpaddingstylingionic2
Dave
Dave

Reputation: 5416

Ionic 2: Remove gigantic padding from form elements

Q) I have the following page grid structure and i want to remove the padding around everything so that it's not so huge. Is there a nice way to do this that doesn't ruin all the Ionic styling out of the box?

Here's the structure:

<ion-content>
  <ion-row baseline>
    <ion-col width-90>
      <ion-item>
        <ion-label stacked>Email</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col width-10>
      <ion-icon name='more'></ion-icon>
    </ion-col>
  </ion-row>
  <ion-row baseline>
    <ion-col width-90>
      <ion-item>
        <ion-label stacked>Floor</ion-label>
        <ion-select item-right>
          <ion-option value="nes">NES</ion-option>
          <ion-option value="n64">Nintendo64</ion-option>
          <ion-option value="ps">PlayStation</ion-option>
          <ion-option value="genesis">Sega Genesis</ion-option>
          <ion-option value="saturn">Sega Saturn</ion-option>
          <ion-option value="snes">SNES</ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
    <ion-col width-10>
      <ion-icon name='more'></ion-icon>
    </ion-col>
  </ion-row>
</ion-content>

Which looks like this:

enter image description here

Thanks.

Upvotes: 3

Views: 7123

Answers (2)

Raja Yogan
Raja Yogan

Reputation: 918

Try giving an override in the app.variables.scss file to the grid bro..

$grid-padding-width: desired value (Its usually 10 by default).

Also have a look at - https://github.com/ionic-team/ionic/blob/master/src/components/grid/grid.scss Hope this helps you.

Upvotes: 6

MT_
MT_

Reputation: 116

If you don't want to override styles in a global fashion, just add a no-padding attribute to the element in question ala <ion-grid no-padding>...

Safari Elements screen shot

Upvotes: 4

Related Questions