I have tried absolutely everything but cannot apply a border radius to ion-popover. I am using an inline ion-popover on the latest angular and ionic. I am using standalone mode and have tried both including the styles in the component and in global.css, nothing works.
I have consulted this GitHub issue: ion-popover add --border-radius variable · Issue #20000 · ionic-team/ionic-framework · GitHub
However, that issue is totally useless as no suggestions are provided and the codepen does not work (popover doesn’t even open).
For reference, here is a CSS class I have:
ion-popover.app-menu-queue-menu ion-content {
--background: blue;
border-radius: 25px !important;
ion-item {
--border-radius: 25px;
}
}
The background of the ion-popover does indeed turn blue and the items do indeed have a border radius of 25px. However, the border-radius on the content (right next to background) has zero effect. It makes no difference if this is in global.css, whether or not I include !important, whether or not I include ion-content in the class, etc. Nothing works.
I am sharing here before opening a GitHub issue. Seems it should not be this complicated.
EDIT:
Ok I have noticed something very strange. When I target the popover in CSS and exclude ion-content I am actually seeing that the entire screen is covered with a blue backdrop when using background: blue. This means that the styles are actually not being applied to the popover itself but to its backdrop. Further, I can also see that the border-radius is also being applied to the backdrop, not the content of the popover itself.
Seems this is 100% a bug.
2 posts - 1 participant