Premium support for our pure JavaScript UI components


Post by satya »

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
Screenshot 2024-12-19 115533_grid cuttingoFF.png (174.72 KiB) Viewed 542 times

Post by ghulam.ghous »

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:

		.parent {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
		}

		.child1 {
			flex: 2;

		}
		.child2 {
			flex: 1;
		}

Is there any chance you can share a small test case with us showing the issue so we can debug it?


Post by satya »

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?


Post by tasnim »

Hi,

I've created a demo for you adjusting the grid heights here https://codepen.io/dv-auntik/pen/NPKMvgE?editors=0110

Hope it helps.


Post by Animal »

satya wrote: Mon Jan 13, 2025 6:20 pm

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:

display : flex;
align-items : stretch;
flex-direction : column;

And the top grid then

flex : 0 2 0%;

And the second one

flex : 0 1 0%;

This is what flexbox does. It allocates space proportionately.


Post by willydee »

Hi Satya,

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…)

https://codepen.io/willydee68/pen/NPKMaJr

Best,
Willy


Post by mats »

@satya Do you have everything working the way you want now?


Post Reply