It it possible to format things inside an ion-select popover?

Ionic Framework
1

I’ve customised an ion-select but one thing that’s bothering me is the inability to customise the popover.

The following works does not work, which is immediately confusing.

ion-popover {
  --width: 100%;
}

I’m unable to style the popover in any way. NB I’m testing these in storybook. So, I’m not 100% certain that global styles find their way into the individual components I’m creating.

I’ve had a look at the DOM, and I can see that there is lot going on in there. A few things I’ve tried are:

  // Turn ALL text dark gray!
  ion-popover::part(content) {
    color: var(--dark-gray);
  }

  ion-popover::part(content) * {
    all: inherit;
  }

And also this, on the assumption that I could apply the styles to the actual text I care about in the nested ion-radio elements, without caring about the complicated DOM nesting structure.

  ion-radio::part(label),
  ion-radio::part(container) {
    --color: var(--dark-gray); /* Styles the label part of radio buttons */
    color: var(--dark-gray);
  }

What I was really hoping to do was apply dark-gray to all except the currently selected (gray!). But none of the above worked.

2

This seems to do the trick for you - IonPopover Formatting - StackBlitz

I know you are on Ionic 7 so it may not work :upside_down_face: You should think about upgrading since Ionic 7 is no longer supported and 8 has been out since April 2024 :smile:

Do note that the styles for a Popover need to be in your global stylesheet since they get presented at the root of your application. See ion-popover: iOS / Android Popover UI Dialog Component. In Vue, unscoped styles in a component are considered global, hence why they work there.

The example in the docs under the Styling section seems to be incorrect adding --color under ion-popover. The example shows it not taking affect. It should be under ion-content.

3

That’s really interesting. I was actually referring to the case where you just use the ion-select and set interface="popover". I fiddled with your example to work that way, and I was no longer able to apply formatting to the popover using your approach.

However, as you say, it is possible to apply the styles globally which I have done.

1 Like
4

Under the hood it is still using an ion-popover which is presented at the root of the application.