5

I'm using Popper.js to make some dropdowns. So far, I found the library to be quite easy to use. I managed to make some cool stuff, even draggable buttons where the popper element automatically moves around the button when I approach the border of the viewport. All of this works perfectly, as long as the popper element is positioned around the button.

Now I am trying to use the inner modifier described in the popper documentation. The goal would be to have popper elements appearing above the button. You can check this page to have an idea of the kind of result I'm looking for: https://material.angularjs.org/latest/demo/select

The problem is, I can't make Popper.js automatically correct the position of the popper when I'm close to the border of the viewport. If I set the placement to 'bottom', the dropdown menu is aligned on the bottom of the button and is overlapping on the top side. However, if I'm close to the top of the screen, I would like the placement to be automatically inverted. Is there any possibility to do that? This is how I initiate my popper.

var popper = new Popper(ref3, el3, {
  modifiers: {
    flip: {
      enabled: true
    },
    preventOverflow: {
      enabled: true,
      boundariesElement: 'scrollParent'
    },
    inner: {
      enabled: true
    }
  },
  placement: 'bottom',
});

I made a small CodePen: https://codepen.io/anon/pen/GyrjXG Buttons 1 & 2 are working as intended. Button 3 has the Inner modifier enabled, but I would expect it to have a similar behavior as for the other buttons.

Thanks so much for your help!

0 Answers0