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

Problems with inner and offset modifiers #373

ConneXNL opened this Issue Aug 2, 2017 · 3 comments


None yet
2 participants
Copy link

ConneXNL commented Aug 2, 2017

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 ;) ?:


This comment has been minimized.

Copy link

FezVrasta commented Aug 3, 2017

  • 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 FezVrasta changed the title How to align two overlapping items by their corners Problems with inner and offset modifiers Aug 4, 2017

@FezVrasta FezVrasta self-assigned this Aug 15, 2017

@FezVrasta FezVrasta referenced this issue Aug 15, 2017


Fix #373 #391


This comment has been minimized.

Copy link

FezVrasta commented Aug 15, 2017

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 #391


This comment has been minimized.

Copy link

FezVrasta commented Aug 15, 2017

Now that 1.12.1 is published you can accomplish your requirements with:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment