CODEWITHSUNDEEP
cssionic4shadow-dom
Codeblooded Saiyan
Codeblooded Saiyan

Reputation: 1497

How to add custom css inside shadow DOM in ionic 4?

I have this html code:

<ion-content>
    <section class='container'>
        ....
    </section>
</ion-content>

I just want the content to be centered on the screen, so I added this css on the inspector first.

I targeted the main element and it worked.

enter image description here

Now, I added this css to the scss file of the page.

main {
    display: flex;
    align-items: center;
    justify-content: center;
}

But the css doesn't work. Is there any way I can add the custom css on the <main> inside ion-content shadow root?

Please help. I'm stuck at this.

Upvotes: 1

Views: 360

Answers (1)

Codeblooded Saiyan
Codeblooded Saiyan

Reputation: 1497

Never mind. I solved using this one.

ion-content::part(scroll) {
    display: flex;
    align-items: center;
    justify-content: center;
}

But if you guys have better idea, just share it. Thank you!

Upvotes: 1

Related Questions