I have one RGL component in my application. It is rendered correctly but when I add some content in Grid item then the content overflows the grid item. It is not pushing the Grid item to increase the height also I tried after updating h component in layout but updated layout isn't respected too.
PS: This works me - I'd to update the key prop every time the height was updated. In short I'd to force re-render the RGL component. And the easy way for me was simply update the keys`.
Related
I'm rendering a number of items, where each individual item uses the same component:
This component internally uses Suspense:
<Suspense fallback={<Spinner />}>{children}</Suspense>
Whenever I click the paginator, a new set of items is rendered. Each of the items uses the same "Suspensed" component.
Problem: Each of the instances shows a fallback (spinner, loader) for a moment, and only then its content.
Since the fallback has constant height, this changes the height of the parent container, which makes the whole page jumping around:
I'm wondering how could I fix this? Basically, I'd like to avoid the new set of items to collapse due to showing the fallback. Sure, showing the fallback on initial load is fine, but I don't think the already loaded component (dynamically imported code) should show it on consequent pages.
I tried using React.startTransition, but that didn't help.
I also checked with components which are not lazily loaded, and everything works fine (parent height remains constant).
Thanks for help!
Update: I came up with a "poor man's fix":
wrapping children inside 2 divs
ResizeObserver monitoring the height of the inner div and setting the same height to the outer one, but in debounced fashion (100ms later)
Resources:
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver
https://www.npmjs.com/package/use-debounce
Note: You'll probably need to mock ResizeObserver in your Jest tests: https://github.com/que-etc/resize-observer-polyfill/issues/50#issuecomment-488064120
I have a default react-grid-layout. The layout on page load everything works properly. I then change the positions and sizes of the widgets and works well as expected.
One of the widgets has a button that loads a list/extended view, for this, I have to increase the height of the widget programmatically, when this happens, all other widgets reset to their original positions, how do I prevent that from happening?
I have a React (hooks) component inside an Accordion (<details> element).
The component makes some assumptions about offsetWidth for some child elements being available, but as the accordion is closed, the component is not visible and these Refs have an offsetWidth of 0.
I need to re-render the component, after the accordion is open and the component itself becomes visible.
I am trying passing the state of the accordion (open/closed) down to the component to trigger a render when this changes, but useEffect is run before the browser draws the component, so width is still 0 even if accordion state is open.
Any idea how to solve this?
Well actually useEffect is called after the component re-render. So that is probably not your problem.
I suggest using the state for dynamically adding a class with display: none and removing it. instead of changing its width to zero
I have a set of items which are rendered into a list. Each item will have a different height when rendered. I need to know item's height in advance before it's mounted into the DOM. So the container should know height of each item it's rendering before they're rendered :)
Is it possible to calculate the height of React element before inserting it into the DOM, dynamically?
I guess you can't get the elements's height before they are rendered because The DOM API can't give you the height of elements it doesn't even know yet.
Are all the different heights totally random ? If not, you could make a guess based on the props object of each element.
In a AngularJS app, using ui-router, i want to change the height of an element (sidebar), when the content inside the sidebar gets updated.
Whats the best way to do this?