Styling popover with same width as reference
Closed this issue · 4 comments
knownasilya commented
Any way to do that?
NullVoxPopuli commented
can popper.js do it? 🙃
knownasilya commented
Maybe this floating-ui/floating-ui#794 (comment)
NullVoxPopuli commented
perhaps!
Poppers options are accepted: https://github.com/NullVoxPopuli/ember-popperjs/blob/main/ember-popperjs/src/components/popper-j-s.ts#L14
and passed in here: https://github.com/NullVoxPopuli/ember-popperjs/blob/main/ember-popperjs/src/components/popper-j-s.ts#L91
knownasilya commented
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
Did it for me.