When I click a button, a popover is shown. “side” is set at its default value (“bottom”), so, by default, the popover appears under the clicked button.
When there’s little space under the button, the popover appears on top of the button instead, which is smart because it has more space to grow in that direction. The problem is, sometimes that doesn’t seem to work and the popup appears under the button anyways, which makes it unreadable.
In the images (below), I scrolled the button (yellow) to 4 different positions and then clicked it. You can see the results of the popover. The first and second images (especially the second one) are sub-optimal, as the popover already has way more growth space on top of the button.
In a minimal sample project, the issue seems to be less noticeable.
My questions are the following:
- Can someone please explain how does the popover pick which side to grow? That may help me to understand why this issue is so noticeable in my project.
- Does anyone know if it’s possible to tell the popover to always appear centered in the screen? I may simply do that as a workaround.
Thanks!
