Stack Overflow
Stack Overflow

Questions tagged [floating-ui]

11 questions
2
votes
0 answers

Floating UI - is it possible to avoid the popper being clipped by overflow:hidden on the parent?

I'm trying to create a dropdown element with floating-ui. My problem is that when the floating ui element is within a parent that has overflow: hidden/auto/scroll then the floating element is hidden/clipped by that overflow setting. I'd like the…
Radu B
  • 47
  • 9
1
vote
2 answers

Popover component with calendar modal in React closes when selecting a date

I am a junior front-end developer and wanted to make my own admin panel as part of my training. I wanted to make a popover component that has a menu in it. When I click on the menu, I would like it to open a modal with a calendar so that I can…
Jesper Buch
  • 11
  • 1
1
vote
1 answer

Autofocus of input inside a popover makes the page scroll

When I have a popover inside a scrollable area with any floating lib in react (tippy, floating-ui, etcetc), and I have an input with autoFocus inside the popover, the screen will scroll when the popover renders. How do I get around this?
Gabriel Petersson
  • 8,434
  • 4
  • 32
  • 41
0
votes
1 answer

How add sticky header/footer to a floating-ui dropdown in react?

Is it possible to create dropdown where the layout has a sticky header and footer and the middle/content part is scrollable. P.S. I was able to do it with setting the height, but that's not a feasable solution because it would stay always that same…
meightythree
  • 308
  • 2
  • 16
0
votes
0 answers

Second tooltip inside popover always triggered when popover displayed

I'm using Popover and Tooltip components (reusable) based on the sandbox examples at https://floating-ui.com/docs/tooltip and https://floating-ui.com/docs/popover. I have a Legend component that includes elements that have Tooltips on them. The code…
Sigfried
  • 2,943
  • 3
  • 31
  • 43
0
votes
0 answers

Popperjs align tooltip to header

I would like to make the tooltip align to the header or at least do not stay closer to the left than the header. But I tried to use preventOverflow and it doesn't work. Here is the example code: https://codesandbox.io/s/adoring-estrela-yb2k8j What I…
yurra
  • 25
  • 5
0
votes
0 answers

Setting Floating UI shift on multiple elements

I want to use Floating UI to prevent dropdown menus from going off the left/right edge of the screen. The example code is as follows: HTML:
0
votes
0 answers

I am facing issue with Azure Pipeline with floating-ui package anyhow we are not using that package anywhere in Project

I am facing issue with Azure Pipeline . It is giving error with floating-ui even though we are not using it anywhere in React project. I tries to find the solution but it not found anything.
Riya Sharma
  • 1
0
votes
0 answers

floating-ui/react-dom: How to prevent tooltip pop-up from relocating based on spacing and window size?

How do I make the position of the floating-ui/react-dom tooltip pop-up static [ always next to the trigger element, either left or right based on horizontal space ]: Currently my tooltip pop-up position keeps changing vertically based on the…
yeln
  • 462
  • 2
  • 10
  • 23
0
votes
0 answers

floating-ui/react-dom: Unhandled Runtime Error ReferenceError: Cannot access 'placement' before initialization

I moved and extracted my floating-ui/react-dom code from one project to another project and now I am getting: Unhandled Runtime Error ReferenceError: Cannot access 'placement' before initialization I do not understand why, the code is identical here…
yeln
  • 462
  • 2
  • 10
  • 23
-1
votes
1 answer

How can I use Floating UI as a Chrome extension content script?

The goal is to insert tooltips into specific elements on web pages using the Chrome extension. I tried using the ESM version of Floating UI as a content script but getting this error: Uncaught SyntaxError: Cannot use import statement outside a…
atjackiejohns
  • 1
  • 2