Menu
css problem with ion-select that has a button inside a shadow root. I need the default value --padding-top:10px,--padding-end:8px,--padding-bottom:10px,--padding-start:16px for this, but it is a first element and assumes the value applied as shown below.
below image contains color box which is ion-select and unable to control size of this box.code for ion-select is below. Can someone help me?
<ion-col size="2" style="padding:0">
<div class="colorselect color_{{color.slice(1,7)}}">
<ion-select >
<ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" >{{optioncolor}}
</ion-select-option>
</ion-select>
</div>
</ion-col>
747
Shadow DOM permits encapsulation of styling rules for custom elements. You can freely define styling information for your elements, such as fonts, text colors, and classes, without fear of the styles applying outside the scope of your element.
Theming and custom propertiesA shadow tree inherits CSS properties from its host. To let users customize your element, you can expose specific styling properties using CSS custom properties and custom property mixins. Custom properties provide a way to add a styling API to your element.
CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts.
Try this one.Its works for me
ion-select{
--padding-top:12px !important;
--padding-end:12px !important;
--padding-bottom:12px !important;
--padding-start:20px !important;
}
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
