I have to remove the extra padding being adding up in .item-inner class inside .item-native. https://ibb.co/vs4BWWp
<div class="item-native">
<slot name="start">
</slot>
<div class="item-inner">
<div class="input-wrapper">
<slot></slot>
</div><slot name="end"></slot>
<div class="item-inner-highlight"></div></div>
</div>
ion-item{
--inner-padding-end: 0px;
--padding-start:0px
}
This works, because since ionic 4 web components & shadow DOM were introduced to keep "essential CSS" isolated.
In a lot of cases it just works to put -- in front of the wanted CSS attribute to change it or in other words: just define a CSS variable with the same name as the attribute you want to change.
Does someone know a complete reference to ionic's shadow DOM or something like that?
Further information:
Shadow DOM in Ionic (and Why it’s Awesome), CSS Shadow Parts,
CSS variables, Web Components
.item-native .item-inner{padding:0}
. this will remove padding of that element
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With