flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Allow Floating Strategy to be Configurable for Popover

Open KPJ-93 opened this issue 8 months ago • 1 comments

Describe the bug Popovers are cut off when the parent overflow is not set to overflow-visible.

Allowing the floating strategy to be configured, i.e. the strategy property for the Popover's createPopper, allows for the Popover to not be cut off.

This bug is equivalent to that described in the following issue in the Flowbite React repository: https://github.com/themesberg/flowbite-react/issues/1504

I have confirmed that the issue persists in this library as well.

To Reproduce Steps to reproduce the behavior:

  1. Create a parent object with an overflow setting that is not overflow-visible, e.g. overflow-scroll
  2. Create a popover inside the parent object with a size that exceeds the parent
  3. Open the popover
  4. Watch as the popover is cut off

Expected behavior Popovers should be configurable to not be cut off when the parent does not have enough space.

Screenshots If the floating strategy cannot be modified, it stays at the default value, absolute. For e.g. a scrollable table, this causes popovers to be cut off when there is not enough space in the parent:

Image

If this strategy can be put to fixed, the issue is completely solved (debugging done via console, so no reproducible code available):

Image

Desktop (please complete the following information):

  • OS: Manjaro Linux
  • Browser Firefox
  • Version 137.0

KPJ-93 avatar Apr 08 '25 15:04 KPJ-93