bug: Popover cut off (off screen).

[infacto]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

The popover cut off on top of the screen.

Expected Behavior

Popover should never cut off. It should be scrollable instead of going into off screen.

Steps to Reproduce

Just open a popover. But It depends on the position of the button / item and its height, screen height etc.

See demo on code pen:
https://codepen.io/infacto/pen/KKQyMje

I think it's because the event target height. E.g. the button or item. This is probably not included in the calculation of the position.
You can try it. Just reduce the size of the follow element (codepen demo).

My current workaround is to use another interface for e.g. ion-select. Any idea?

Code Reproduction URL

No response

Ionic Info

See codepen. We currently work on Ionic 5. But it also appears on Ionic 6.

Ionic:

   Ionic CLI                     : 6.16.1 (AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.6
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.2.2

System:

   NodeJS : v14.19.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.16
   OS     : Windows 10

[liamdebeasi]

Thanks, I can reproduce this. We adjust the popover position so that it does not go off the bottom of the screen in https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/utils.ts#L866. However, when we make this adjustment we offset the top position of the popover by the sum of the content + arrow.

If there is not enough space above the trigger to display the entire content + arrow, the popover goes offscreen. In this case, the browser will not adjust the height of the popover. Ensuring that the top position is always greater than 0 should fix this issue.

[liamdebeasi]

Here is a dev build if you are interested in testing a proposed fix:

6.1.7-dev.11653492647.1a3b4a72

[infacto]

Thanks, it seems to work.

I just have two more issues. Which can be split into separate tickets. Or just ignore it.

• The popover docks too early to the bottom. Which results in a blank space. Not really critical. It's about the look.

• The popover should use the most space as possible if it would overflow. There are cases of too small popover. This should not happen. I would expect it to extend to the top in the same behavior as to the bottom. Maybe a min-height can help? Or check which side (top or bottom) has more space to expand. Idk. we just should avoid such cases.

[liamdebeasi]

The popover docks too early to the bottom. Which results in a blank space. Not really critical. It's about the look.

How can I reproduce this on my end?

The popover should use the most space as possible if it would overflow. There are cases of too small popover. This should not happen. I would expect it to extend to the top in the same behavior as to the bottom. Maybe a min-height can help? Or check which side (top or bottom) has more space to expand. Idk. we just should avoid such cases.

This is probably a client side fix using the --min-height css variable. We set the min-height of the popover to 0px. There's probably a reasonable min-height value we can change it to, but that would be a breaking change so it is beyond the scope of this fix.

[infacto]

@liamdebeasi You can reproduce it in e.g. my code pen demo. Just click somewhere to open the popover. You'll see that the popover snaps to the bottom earlier than expected. It should snap on popover height. Otherwise it creates empty space on the popover. I think it's not really critical. I just noticed it during this issue here.

A more critical issue is the second one with min height. Which can be reproduced e.g. with a landscape mode and click somewhere around the bottom area. The screen (page) and popover height may affect it. It happens when the popover space above is not enought and want's to open it at bottom. In this case I'll expect that the popover snaps on top to bottom to use the full available space. Setting min-height makes the popover appear offscreen (cut off). I expected that it expand to the top. But anyway. In my opinion the popover should never behave like this. It should always be useable. The demo (code pen) just tests all positions. It's nothing special. You can have this position on a real world application. But whatever, I just reported that issue. Feel free to do whatever you want. I would take a look at it and possibly submit a solution if I had time. I won't be mad if you close this and wait for someone else to report it.

Btw. you can set any version you want in cdn urls (e.g. ...npm/@ionic/@6.1.7-dev.11653492647.1a3b4a72...).

[liamdebeasi]

Thanks for the issue. This has been resolved via #25350, and a fix will be available in an upcoming release of Ionic Framework.

---

I was able to reproduce those other behaviors with the latest stable version of Ionic, so they do not seem to be caused by the patch for this issue. We try to keep threads dedicated to a single issue at time, so I recommend starting separate threads for these other issues. Feel free to use the same code reproduction and also reference this thread for additional context. Thanks!