1

i'm struggling trying to change the size units of an overlayTrigger's popperConfig from px to em in react (& react bootstrap) and can't seem to find any docs that can help. Any idea on how i can achieve this? Of course, overriding in css is always possible, but cannot seem to find a way to do that either without console errors... Any help would be much appreciated!

      <OverlayTrigger
    trigger={['hover', 'focus']}
    placement="bottom"
    overlay={popover}
    defaultShow={true}
    container={navContainerRef.current}
    popperConfig={{
      modifiers: [
        {
          name: 'offset',
          enabled: true,
          options: {
            offset: [0, 64]===> 64px in em's <====
          }
        },
      ],
    }}
  >
    <NavLink to={link} className={linkClassName}>{linkTitle}</NavLink>
  </OverlayTrigger>
Franke
  • 13
  • 4

1 Answers1

1

In the popperjs documentation, offset option accepts a function or an array with two elements: https://popper.js.org/docs/v2/modifiers/offset/

the basic offset accepts an array with two numbers in the form [skidding, distance].

...

The option can also take a function provided with some arguments, giving you access to the popper placement, and the reference and popper rects.

Neither array nor the function seem to help you with your use case.

Maybe you can write your own modifier: https://popper.js.org/docs/v2/modifiers/, but it seems exaggerated.

Why don't you just map your em to pixels, with calc() or anything?

Igor Gonak
  • 2,050
  • 2
  • 10
  • 17
  • thanks for the reply! Truth is i cannot seem to understand too well how it works. When i write, let's say: offset: [0, 40] on the modifier, the result in css comes back to inset: `0px auto auto 0px; transform: translate(0px, 104px);` which is not at all what is being specified and it doesn't fit well on the extra-large screens. The only workaround would be to disable popper on the dropdown all together and just generate pure css but cannot seem to be able to do that properly or at least am not able to as the documentation is not very clear about it... – Franke Apr 08 '22 at 16:16
  • I tried `enabled: false,` to generate my own css but that doesn't work either – Franke Apr 08 '22 at 16:30