NullVoxPopuli/ember-popperjs

Styling popover with same width as reference

Closed this issue · 4 comments

Any way to do that?

can popper.js do it? 🙃

  get popperOptions() {
    return {
      placement: 'auto',
      modifiers: [
        {
          name: 'sameWidth',
          enabled: true,
          fn: ({ state }: any) => {
            state.styles.popper.width = `${state.rects.reference.width}px`;
            state.styles.popper.left = `${state.rects.reference.x}px`;
          },
          phase: 'beforeWrite',
          requires: ['computeStyles'],
        },
      ],
    };
  }

and

  <PopperJS @options={{this.popperOptions}} as |reference popover|>

Did it for me.