-
-
Notifications
You must be signed in to change notification settings - Fork 227
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
Arrow position wrong for certain placements #403
Comments
I can't see anything in the codesandbox, code is missing. From the screenshot it looks like you may want to add some margin to the arrow element so that it doesn't glitch like in your pictures. |
@FezVrasta sorry about that VPN glitched when saving. It should be working now 👍 Thanks for the quick response. I updated my const { styles, attributes } = usePopper(
referenceElement.current,
popperElement.current,
{
placement,
modifiers: [
- { name: "arrow", options: { element: arrowElement } },
+ { name: "arrow", options: { element: arrowElement, padding: 10 } },
{ name: "offset", options: { offset: [0, 8] } }
]
}
); I have a couple of questions:
|
Adding arrow to @peterjcaulfield where in the docs is example that you mention linked? I only found it through the repo. |
Reproduction demo
https://codesandbox.io/s/blue-leftpad-4of16?file=/src/Tooltip.tsx
I am using example code from the popper docs with styled components.
I want to make sure it is not related to styled components usage. Happy to create an additional example if this repro isn't good enough.
Steps to reproduce the problem
Please see code sandbox. Issue is present on load.
What is the expected behavior?
When I adjust the
placement
value the arrow should be positioned correctly viastyles.arrow
What went wrong?
The arrow is positioned correctly for certain placements like
top
andbottom
but is off for most other placements including variation placements liketop-start
,bottom-start
etc.Any other comments?
I might be missing some userland code that I need to add here but my expectation was that the arrow would get positioned automagically via the
translate
styling being passed viastyles.arrow
.Guidance on how to get the correct arrow position for all placement values would be greatly appreciated!
Packages versions
The text was updated successfully, but these errors were encountered: