We have two Bryntum grids on the same page. The first grid should occupy 2/3 of the available space, and the second grid should occupy 1/3 of the available space. The bottom line of the grids is not visible on different screen sizes. How can we set the maxHeight for the grids to ensure the bottom line is always visible?
We have set the maxHeight for the first grid to calc((100vh - 426px) / 3 * 2).
We have set the maxHeight for the second grid to calc((100vh - 426px) / 3).
Attached the issue
Below are sample issues we are seeing for combination of browser specs
EDGE Browser: Employment history cube (second grid on the page) bottom line is not visible even at 100% browser zoom (Machine res: 1080p) . this works fine on chrome browser
On chrome browser Audit history cube (top grid) bottom line is not visible even at 110% browser zoom
Attachments
Screenshot 2024-12-19 115533_grid cuttingoFF.png (174.72 KiB) Viewed 542 times
I have tried this in our basic example and it does not seem to be an issue. I tried it in firefox browser. Can't say what is wrong without looking at the app code. Here is the css which I have used:
Thank you for your response. The proposed solution is not effective for our use case, as we require the grids to scroll when the number of rows exceeds the grid height.
We are implementing grids within Salesforce LWC components. Specifically, we have two grids on the LWC component: the first grid should occupy 2/3 of the available space, and the second grid should occupy 1/3 of the available space. However, the bottom line of the grids is not visible across different screen sizes. We have configured the maxHeight for the first grid to calc((100vh - 426px) / 3 * 2) and for the second grid to calc((100vh - 426px) / 3).
Could you please provide further assistance or suggest any adjustments to resolve this issue?
Thank you for your response. The proposed solution is not effective for our use case, as we require the grids to scroll when the number of rows exceeds the grid height.
We are implementing grids within Salesforce LWC components. Specifically, we have two grids on the LWC component: the first grid should occupy 2/3 of the available space, and the second grid should occupy 1/3 of the available space. However, the bottom line of the grids is not visible across different screen sizes. We have configured the maxHeight for the first grid to calc((100vh - 426px) / 3 * 2) and for the second grid to calc((100vh - 426px) / 3).
Could you please provide further assistance or suggest any adjustments to resolve this issue?
Never use magic numbers like that.
The containing element should be sized by CSS to be the height available to both grids in your app, and be styled:
I have stitched together a codepen, where two grids are embedded in a flex/grid layout that looks similar to the visible part of yours. Both grids are scrolling and resizing with a 2 : 1 ratio just fine. Feel free to use the CSS rules as inspiration. (They're sloppily put together and far from being optimized though…)