CODEWITHSUNDEEP
javascriptcssangularionic-framework
Ram Guiao
Ram Guiao

Reputation: 362

How to remove space (margin/padding) of ion-row and ion-col in ionic?

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

Upvotes: 10

Views: 27074

Answers (2)

Rob
Rob

Reputation: 2323

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.

Upvotes: 17

99tharun
99tharun

Reputation: 1216

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>

Upvotes: 18

Related Questions