Popper is 5px left offset when using auto, bottom, and bottom-start
See original GitHub issueCodePen demo
https://codepen.io/Saturn2888/pen/dgLyqK
Steps to reproduce the problem
- Remove margin on HTML
body
. - Put an reference DOM node at 0x0.
- Add a popper element on the body for that reference DOM node.
- Popper has a 5px left offset. This happens using
auto
,bottom
, andbottom-start
.
What is the expected behavior?
It should be left-aligned with the reference DOM node like it is in every other situation.
What went wrong?
It looks like it’s arbitrarily adding a 5px left offset:
transform: translate3d(5px, 100px, 0px)
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Popper is 5px left offset when using auto, bottom, and ... - GitHub
This happens using auto , bottom , and bottom-start . What is the expected behavior? It should be left-aligned with the reference DOM...
Read more >Popper (v1.×)
Popper.placements : enum. List of accepted placements to use as values of the placement option. Valid placements are: auto; top; right; bottom; left....
Read more >Team:PYMS GZ China/JS popper - iGEM 2020
marginTop; boundaries.bottom = height + offsets.top; boundaries.left += ... Utility used to transform the `auto` placement to the placement with more ...
Read more >popper.js - UNPKG
marginTop;\n boundaries.bottom = height + offsets.top;\n boundaries.left += ... the `auto` placement to the placement with more\n * available space.
Read more >v-tooltip3 - npm Package Health Analysis - Snyk
Easy tooltips, popovers and dropdown with Popper.js ... <button v-tooltip.bottom-start="'You have ' + count + ' new messages.'">.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Just so I can help out others having the same issue:
In Popper’s 3rd arg, pass in the options object with the prop like so:
From the docs:
Wrong syntax:
https://codepen.io/anon/pen/VENGVJ