Rank 2
Iron
Iron
Iron
I'm displaying a Popover in a GridCell, but the content is being queried as the Popover renders.
Because of this, the initial height of the Popover is much less than it will be once the data is available. The problem I'm seeing is that when the data becomes available, the Popover increases in height but any new collision is not detected, which sometimes results in the Popover going offscreen.
Here's a demo where the Popover position is bottom, but should flip on collision. When mousing over the Popover cell in the bottommost (visible) row, initially there is enough space to display below the cell. After the setTimeout runs, the content grows off the page.
https://stackblitz.com/edit/react-tudni8?file=app/main.jsx
1 Answer, 1 is accepted
Hello,
Thank you for the example.
That is expected because when the content is changed the Popover is not re-rendered (or re-mounted) in order to calculate its position again. The position is calculated only when the component is about to be rendered on the page.
We can handle that, by re-mounting the component when the new content is available. I updated the example to showcase a possible approach:
https://stackblitz.com/edit/react-tudni8-1szxwz?file=app/main.jsx
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 2
Iron
Iron
Iron
Yep that works, but I suppose I dumbed down my example too much. Do you have any suggestion for how I could make this work if the Popover content/data is contained in its own component?
Ex. https://stackblitz.com/edit/react-tudni8-gzj1nu?file=app/main.jsx
Hello,
Thank will require changing the component structure. We can use the React approach for lifting up the state:
https://reactjs.org/docs/lifting-state-up.html
The idea here is that the Popover and its content both should know that the content is changed. If the Popover does not know that the content is changed it will stay in the same position.