themesberg / themesberg/flowbite
Allow Floating Strategy to be Configurable for Popover
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 9.4k
- Forks
- 862
- PR merge metrics
- No merged PRs in 30d
Description
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:
- Create a parent object with an overflow setting that is not
overflow-visible, e.g.overflow-scroll - Create a popover inside the parent object with a size that exceeds the parent
- Open the popover
- 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:
If this strategy can be put to fixed, the issue is completely solved (debugging done via console, so no reproducible code available):
Desktop (please complete the following information):
- OS: Manjaro Linux
- Browser Firefox
- Version 137.0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Popover's createPopper integration and inspect how its strategy property is currently selected. Reproduce the issue with an overflow-scroll parent and verify that configuring the strategy prevents the popover from being cut off.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100