Shadow Root... how to fix ion-item padding?

I need to get rid of the 10px padding the class “item-inner” adds to the ion-item.
To bad it’s nested inside the shadow root and i can’t access it via the part
(Who said, btw, Shadow Parts are is a cool idea? - It’s design, we don’t need to adapt every software principle to css)

Thanks to another post I found quirk solution via type script, but it simply looks *** that mys lists are drawn first with the padding and then, after a second (I need a timeout to wait for the dom) they are redrawn again without the padding, As the lists are dynamically (I add items), it simply looks s**t.

Is there any other way to get this solved?

Without “hack”:

With the “hack”
Screenshot 2020-09-26 at 19.14.04

Ionic uses Css Variables in their Shadow Dom for many things. Check if you can adjust what you want with one of these: https://ionicframework.com/docs/api/item#css-custom-properties

Here we do not need any hack. Ionic already have the solution.
Please check my code and get it resolve.

In SCSS use --inner-padding-end:0; in ion-item

Cheers!

2 Likes

It’s work thank’s men !