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!
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.
@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.
1 Like
@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
2 Likes
Glad you managed to solve it!
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…
1 Like