Popper-core: Problems with inner and offset modifiers

[ConneXNL]

I am not sure if this library can be used to sync the position of overlapping elements and align them by their corners. I played around with some of the settings but I am not sure why the following even works and if its the way to go:

placement: 'bottom-start', modifiers: { offset: { offset: [DEPENDS ON ALIGMENT, SEE BELOW }, computeStyle: { gpuAcceleration: false, }, preventOverflow: { enabled: false, padding: 0 } }

Align top-left corners: 0, -100%p
Align bottom-left corners: 0, -100%r
Align bottom-right corners: 100%r-100%p, -100%r
Align top-right corners: 100%r-100%p, -100%p

However, the problem is that the vertical offset seems to haver and p flipped. Whenever I thought I needed to use -100%p i needed to use -100%r instead, and the other way around.

Am I missing something?

Here is a codepen showing that it works, but I don't understand why ;) ?:
https://codepen.io/anon/pen/qXaZoQ

[FezVrasta]

• top-left: 0, -100%p - This is moving the popper element down by its height length, top-left is positioning it on the left of its reference element.
• bottom-left: 0, -100%r - This seem to not behave properly, will have to check it
• bottom-right: 100%r-100%p, -100%r - This can be simplified to just 0, -100%r with placement: 'bottom-end', but again, it should be -100%p actually, will check it
• top-right: 100%r-100%p, -100%p - This can be simplified to 0, -100%p with placement: 'top-end', it seems to behave properly

Said that, the inner modifier should do exactly what you are looking for, but looks like it doesn't work with -end and -start variations, I will have to verify why it doesn't work.

[FezVrasta]

Found the problem with your examples.

The flip modifier is getting in your way because when it detects the popper element is overlapping with the reference element, is fliping it on the other side.

This is an expected behavior of the flip modifier, but the documentation should be clearer.

For your use case, as I said, you should use the inner modifier, which will be fixed with https://github.com/FezVrasta/popper.js/pull/391

[FezVrasta]

Now that 1.12.1 is published you can accomplish your requirements with:
https://codepen.io/FezVrasta/pen/dzZXrR