Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to edit "item-inner" class in item-native div in ionic v4?

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>
like image 428
mani singh Avatar asked Jan 28 '19 11:01

mani singh


2 Answers

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

like image 85
Code Mickey Avatar answered Nov 15 '22 03:11

Code Mickey


.item-native .item-inner{padding:0}. this will remove padding of that element

like image 41
Xenio Gracias Avatar answered Nov 15 '22 05:11

Xenio Gracias