themesberg / themesberg/flowbite

Allow Floating Strategy to be Configurable for Popover

Open
#1,056 0 comments 0 reactions 0 assignees View on GitHub

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:

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.