Please help! ion-content margin problem!


#1

Hy guys i have a little problem.
I dont know how to remove this default layout padding like here:

I already tried with this css:

.nomargin{
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    margin: 0px !important;
    width: 100% !important;
}

But it doesnt works at all. Get the same result.
So does someone how to remove that margin/paddign only for that layout.
Thanks for help!


#2

Perhaps you’ve used the padding attribute on the content? like this:<ion-content padding></ion-content>

My second guess would be the margin’s on the list. Use your browser inspector to determine where the margins/paddings are coming from first.


#3

@luukschoen thanks for the tip with the browser.

Perhaps you’ve used the padding attribute on the content? like this:
no i dont have padding. My content looks like this:

<ion-content class="nomargin">
    <ion-item-group color="androidprimarydark" *ngFor="let group of groupedContacts">
      <ion-item-divider color="androidprimary">{{group.letter}}</ion-item-divider>
      <ion-item color="androidprimarydark" *ngFor="let contact of group.contacts">{{contact}}</ion-item>
    </ion-item-group>
</ion-content>

and my css for that content looks like this:

.nomargin{
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    margin: 0px !important;
    width: 100% !important;
}

And i didnt work.

My second guess would be the margin’s on the list. Use your browser inspector to determine where the margins/paddings are coming from first.

I used the browser inspector and it seems to be the scroll content whitch causes the padding.


#4

@luukschoen

Got it to work for now.
I noticed this css line in the browser inspector:

As i set thet 16px to 0px the padding was removed.
So i added it into my project like this (notice you have to define the page in your css because if you dont the padding will be removed for the whole app):

page-about {

.scroll-content{
padding:0px !important;

}

And voila all is done now!
Cheers


#5

Glad you managed to solve it!


#6

Glad to hear you solved it, but if the active css is “[padding] .scroll-content” (as displayed in your screenhot) it means that somewhere in your html code there is really an attribut “padding” which is used/written down (as @luukschoen suggested).

As a best practice, I think it’s good to don’t use “!important”, maybe if you still have 5 more minutes, try a search on that keyword again, just to be sure you know…