Re-Flex
Re-Flex copied to clipboard
leefsmp
ag-grid doesn't display in a resizable pane
I'm fairly new to React and I don't know if this is a Reflex issue, or an ag-grid issue. I started with the "Advanced Reflex" example, but without the right panes. A simple div renders just fine in one of the left panes, and a Cesium viewer renders in the middle pane, but an AG-Grid doesn't display at all in a left pane. There are no errors. These are all function components. Other than this Reflex is exactly what I was looking for and is way superior to other libs I tried. Thanks and great job!
ok so first of all, if you are new to react and that lib my first advice would be that you start with a very basic example so you can at least rule out a few things if it isn't working as expected. Once you got that working you can always add more complexity in it. Secondly without a reproducible sample it would be very hard to tell anything about why it doesn't work. You should start by providing that as codepen, sandbox or similar, then you would need to take a look at the css inspector to see if the html elements have actually been created or add some console.logs in your code to see if the react code is correctly being invoked.
I created an example in code sandbox (I think, first time I've used it). This should be the link: https://codesandbox.io/s/epic-swartz-kn4oj2 Grateful for any advice you can offer.
The folks at AG-Grid offered this advice: Pitfall When Using Percent Width & Height
If using % for your height, then make sure the container you are putting the grid into also has height specified, as the browser will fit the div according to a percentage of the parent's height, and if the parent has no height, then this % will always be zero.
It looks like the library you are using (Reflex) is not giving specific width to the main container, that is why the grid is not appearing, you will need to change it so that the container of the grid has specific width and height.
I'll continue to try things as time permits, TIA for any advice.
Ok so I haven't tried your sandbox but from those comments seems similar to #53 for example. You need to have at least one parent height defined not in %, for example you could just set body height to 100vh, or set explicit height in px in one of the parent, doesn't have to be the height of ReflexContainer which by default is set to 100%, assuming you will use it inside another component higher in your DOM hierarchy.
You can close this issue as we're not going to be able to use Reflex at this point. It's a great library but we obviously haven't got the JavaScript / React skills yet to make everything work. FWIW we did get an ag-grid to work properly. However a relatively complex component that contains a grid fails to display. This is our company's first web-based project which is too close to the end with too many other things to be done. Thanks again for your patience, we hope to get a chance to revisit this in the future.
Sorry I didn't work out for you, I would assume it is a css problem on your side related to initial size of rendered component as I've never encounter such blocking issue. I use Reflex in a lot of professional web projects and I use to display fairly complex components inside a lot of nested resizable reflex layouts. Never had problem but every situation is a bit different with its own share of complexity. If you get a chance to revisit that or have time and capacity to provide a reproducible sample feel free to reopen or create a new issue. Thanks.