Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Popover] [Potential Feature Request] How to align the start of the popover with the center of the trigger? #1195

Open
benface opened this issue Dec 20, 2024 · 1 comment · May be fixed by #1223
Labels
component: popover The React component. enhancement This is not a bug, nor a new feature support: question Community support but can be turned into an improvement

Comments

@benface
Copy link

benface commented Dec 20, 2024

First of all, amazing work on this library. The alpha version looks super solid already.

I've come across a potential limitation when using Popover. My design requires me to align the left / start of the popover with the center of the trigger (minus an offset, because actually the goal is to align the center of the first column of the popover, which has a fixed width... but that's irrelevant). With the align prop, it only seems possible to align the start of the popover with the start of the trigger, the center of the popover with the center of the trigger, or the end of the popover with the end of the trigger. Is there a solution I'm not seeing, given that the trigger has an unknown/dynamic width? If not, I have 2 potential (but very rough) ideas of how it could be handled (assuming you agree that it's a worthy use case!)

  1. Another prop named triggerAlign or something, which would default to the same value as align, but in my case I would set it to center.
  2. I have no idea if this is technically feasible, but maybe the alignOffset prop could accept a function that would receive the dimensions of the trigger and of the popup, and could do some math based on those to return an offset value?

Thanks so much again, I'm excited to see how this library evolves.

@github-actions github-actions bot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 20, 2024
@mj12albert mj12albert added component: popover The React component. support: question Community support but can be turned into an improvement labels Dec 20, 2024
@atomiks
Copy link
Contributor

atomiks commented Dec 20, 2024

I have no idea if this is technically feasible, but maybe the alignOffset prop could accept a function that would receive the dimensions of the trigger and of the popup, and could do some math based on those to return an offset value?

Yeah this is a good idea. This is what Floating UI's offset() middleware allows for, which we use internally. alignOffset and sideOffset would pass the Rects of the trigger/anchor and popup elements, allowing you to perform custom math on their sizes to offset it.

@atomiks atomiks removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 20, 2024
@mj12albert mj12albert added the enhancement This is not a bug, nor a new feature label Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: popover The React component. enhancement This is not a bug, nor a new feature support: question Community support but can be turned into an improvement
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants