Ionic 6 Popover Tab Problem

Ionic Framework Ionic Vue
1

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:

2

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?

3

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

4

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.

5

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;
}
6

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.

7

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.

8

These are both by design.

  1. ion-popover is a global component, meaning it is placed as a descendant of ion-app, not as a descendant of the current view. You need to add a class to the popover if you want to target that specific instance. I recommend reading the Customizing Popovers documentation.

  2. The popoverController makes no assumptions about how many instances of the popover you can have open at once. This detail is up to the developer to define. So clicking a button that calls popoverController.create 2 times will create 2 popovers. If you want to only open 1 popover at a time, we recommend adding logic to your presentation function that checks for an existing popover before presenting.