Popper moves out of viewport when resizing about floating-ui HOT 9 CLOSED

It's the preventOverflow modifier that kicks in when it shouldn't...

A temporary fix is to disable this modifier:
http://codepen.io/FezVrasta/pen/Lkjjqb

But the modifier should be fixed.

from floating-ui.

Thanks a lot 👍 ... I'll probably use it as you suggest and try to fix it later on if I'll get a timeframe for this.
Happy coding! :)

from floating-ui.

@Falingorn had you a chance to look at this problem?

from floating-ui.

I'm digging into it, seems like the problem is the arrow modifier, not preventOverflow

This makes the bug much easier to fix :)

from floating-ui.

Ok found the problem, in your example, the arrow element has not style, this makes the arrow wide as the popper, and creates the problem you describe.

You should not add an arrow if you don't want to use it, or give a width to the arrow to make it work properly.

http://codepen.io/FezVrasta/pen/ZOmBkQ

I'm closing it for now because it doesn't seem like a bug of the library but a misconfiguration. If you have any idea to avoid this problem let me know.
For now I'd say: Don't use arrow if you don't want to display one.

from floating-ui.

Thanks a lot ... will try it.
Is there a possibility to decide via configuration options if popper has an arrow or not? I think this would be a better approach than solve this with css.

You rock man! ;)

from floating-ui.

you can set arrowTagName to undefined(or any falsy value) to avoid the creation of the arrow element.

http://codepen.io/FezVrasta/pen/RRqBdO

from floating-ui.

I have to same problem in version "@popperjs/core": "^2.11.0"
node 10.
framework Vue 2

createPopper(document.querySelector(...), document.querySelector(...), {
        placement: 'bottom',
        modifiers: [...], // offset[0,5]
      });

from floating-ui.

Ok. I fix it. You need wrap your's trigger div with position: absolute

<div style="position: absolute">
    <i
      class="icon-custom icon-custom--info"
    />
    <div
      :style="..."
      role="tooltip"
    >
      <slot name="content"/>
      <div
        id="arrow"
        data-popper-arrow/>
    </div>

  </div>

from floating-ui.