Ionic 4 - How to change css of ion-select popover

Ionic Framework
1

Hi everyone, is there a way to change the css of the popover from the ion-select? Im using the interface option like stated on the docs and would like the popover to have more width.

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select interface="popover" placeholder="Select One">
    </ion-select>
  </ion-item>
2

I figured it out by adding this line to the global.scss file:

.popover-content {
    --min-width: 100%;
}
2 Likes
3

How can I change the width of the content at the component level? I added your suggestion in my fileName.component.scss but it doesn’t change. Thoughts?

4

you must put it outside of { } brackets in your .scss, like this:

page-login{
.somecss{
}
.somecss1{
}
} ----> after last .scss bracket
.popover-content {
min-width: 90% !important;
}

2 Likes
5

thanks, it worked !!

6

With same problem, i’ve tried now with last Ionic & Angular 8 but does’nt works…
Are there other solutions ?

1 Like
7

its worked…Thanks!!

8

.popover-content {
min-width: 90% !important;
}

yep worked for me, but i add:
encapsulation: ViewEncapsulation.None
like this:
image