Ionic 6 Popover Tab Problem

Hello Community,

i have a problem with the Beta Ionic 6 and the Popover Controller in Tabs

If i click on the Tab the Popover appears on the clicked Tab if i use side=“top” dont work.

My problem is the Popover needs a higher offset-y value and css dont work too.

If i use cssClass: “my-custom-class”

and then

.my-custom-class .popover-content

it dont work :confused:

Hard to say what’s going on without seeing the code you have tried. Can you send over a GitHub repo with your code running in an Ionic starter app?

Did you push your code to the repo you sent via direct message? It looks like a blank tabs starter app.

yes i pushed it on github.

EDIT: i upload it again

its a tab example with the 4 tab its a popover tab but its not possible anymore to make the popover over the tabs to position on top or to change via css the position.

Thanks! There are two issues here:

  1. There is a bug in Ionic Framework v6 where we compute the dimensions of the popover content incorrectly. This is causing the popover to appear partially offscreen. Can you give the following build of Ionic Framework a try and let me know if it resolves the issue?
npm install @ionic/vue@6.0.0-dev.202107231911.ba5c32c @ionic/vue-router@6.0.0-dev.202107231911.ba5c32c
  1. The --offset-y variable should be applied to the ion-popover directly, not to the .popover-content class. ion-popover was converted to use the Shadow DOM, so that selector had no effect. Also you were targeting a class on the ion-popover that was not set. Instead you can write:
ion-popover {
  --offset-y: -100px;

Thank you and the ionic team for this great framework.

I tested your npm package, now it works but when i want to change only in tabs or tabspopover the css i have a problem because ion-popover with offset y works only in the global css.

If i has on Android a Popover and i click on the Button to open the Popover i can click infinite times and the popover displays over the popover, maybe a bug too?

In Web Version i have this problem not.