Popper-core: Modify offset position

[G-J]

CodePen demo

https://codepen.io/gjk/pen/OOXQZe

Steps to reproduce the problem

1. initialize a new Popper
2. Set the modifiers offset to 0%

What is the expected behavior?

I expect the popper to be positioned at the absolute bottom left of the reference.

What went wrong?

The popper is gets the offset left value of the reference container. Placing it x px along the axis. I would have expected the positioning in the inline transform attribute to place it at 'left 0'

Any other comments?

Can this also be done straight from Bootstrap dropdown initialization?

[FezVrasta]

According to the documentation of the offset modifier, the value you provide is going to shift the popper of the given amount, it's not going to position the element absolutely relative to the reference element.

What you are looking for is -50%, which is going to move the popper by 50% of the reference element width on the left.

Also, offset takes an offset option, so it should be used as { modifiers: { offset: { offset: '-50%' } }

https://codepen.io/anon/pen/YEGYww

[Johann-S]

Yep you can do that on Bootstrap dropdown initialization by using data-offset see : https://getbootstrap.com/docs/4.0/components/dropdowns/#options