0

I am creating a drop-down control as a reusable web component and I decided to use PopperJS to handle the positioning of the drop-down items.

I am experimenting with sub-items, I've created a little check to determine the placement:

placement: this.parentElement.nodeName == "MY-ELEMENT" // Check if parent is a menu
  ? "right"
  : "bottom"

I have created a StackBlitz.

The sub-items open to the right okay, but if you F12 and inspect the items they are translated -60px, so the items are positioned in the centre rather than positioned at the bottom going down.

If I choose placement right-end then the items are positioned too far down, what I want is for translate Y to be 0 not -60.

How do I determine that the items should be positioned correctly?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Luke T O'Brien
  • 2,565
  • 3
  • 26
  • 38

1 Answers1

1

Is the StackBlitz working properly?

I think you could use the offset modifier to add some skidding:

createPopper(reference, popper, {
  placement: this.parentElement.nodeName == "MY-ELEMENT"
            ? "right"
            : "bottom",
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ({ placement, reference, popper }) => {
          if (placement === 'right') {
            return [60, 0];
          } else {
            return [];
          }
        },
      },
    },
  ],
});

It could be 60 instead of -60, not sure if I got exactly what you want. You can check the usage here: https://popper.js.org/docs/v2/modifiers/offset/

huancito
  • 28
  • 7