9

Here is my code: 

<ion-content padding text-center>
    <img src="../assets/img/logo.png" width="200" class="logo" />


</ion-content>
<ion-footer>
    <ion-row no-padding>
        <ion-col col-6 align-self-stretch>
            <button ion-button full>Button</button>
        </ion-col>
        <ion-col col-6 align-self-stretch>
            <button ion-button full>Button</button>
        </ion-col>
    </ion-row>
</ion-footer>

I need to remove those paddings/margin for ion-row and ion-col. I tried googling but i got no luck. I am also newbie in Ionic. TIA!

Here is the screenshot:

enter image description here

I need to achieve this:

enter image description here

Ram Guiao
  • 352
  • 1
  • 7
  • 13
  • 2
    add `no-padding-class` to the `buttons` – Aravind Dec 06 '17 at 10:10
  • If you're debugging Ionic with chrome you can just use the inspector to find the divs + classes created by ion-col and ion-row. (see here)[http://mcgivery.com/debugging-ionic-apps-chrome-developer-tools/] – iSZ Dec 06 '17 at 10:15

2 Answers2

18

You need to set the no-padding attribute on ion-col instead of ion-row and no-margin for the buttons.

<ion-row>
    <ion-col col-6 no-padding>
        <button ion-button full no-margin>Button</button>
    </ion-col>
    <ion-col col-6 no-padding>
        <button ion-button full no-margin>Button</button>
    </ion-col>
</ion-row>
99tharun
  • 1,216
  • 3
  • 20
  • 36
15

For those using Ionic4+ , use class="ion-no-padding" or class="ion-no-margin".

...
<ion-col class="ion-no-padding">
   <ion-button class="ion-no-margin">Button</ion-button>
</ion-col>
...

For more info please refer to the docs: https://ionicframework.com/docs/layout/css-utilities#element-padding.

Rob
  • 2,243
  • 4
  • 29
  • 40