I am working with the KendoReact data grid for a SPA. The idea is that
many elements on the page stay consistent, like a navigation bar and
footer, and each 'page' is just different content being conditionally
rendered inside of that frame.
In this screenshot a very basic diagram is shown color coding sort of how this is laid out. The root contains the constant elements like the left navbar or footer. And react-router switches the inner content around depending on the route chosen. For this page, a div exists to house a backdrop image (blue area). And another div provides a background for the pages elements (pink). Inside that div is titles, buttons, etc. and then a Kendo grid.
A basic layout for my markup is as follows:
<div className="flex flex-col w-screen h-screen fixed">
<div className="flex flex-grow overflow-hidden">
<LeftNavigationBar />
<TablePage>
<div className="w-full h-full p-8 justify-center">
<div className="h-full w-full overflow-y-auto flex flex-col">
<Grid>
</div>
</div>
</TablePage>
</div>
<Footer />
</div>
The issue I am having is with width sizing. My
goal is that I can set some sort of minWidth property on them. I want
them to proportionally size up to fit the component size, but once the
window is small enough the columns reach their minsize, the grid will
shrink and use horizontal scrolling instead.
I read through a few docs to get this working, but none of them were quite right. The first example on This page
is almost exactly what I am looking for. And I tried implimenting this
solution. The problem is with my navbar and other consistent elements.
It looks like the column width setting causes the table to override the
widths of everything else on the page.
This
screenshot is a rough diagram representing what is happening. When I
shrink the window it will actually start to overlap my other elements
until the columns reach a minsize, and then the scrollbar is shown.
So
my question boils down to how I may be able to implement my solution
while keeping the width of my other persistent elements as a priority.
Thank you for taking the time and let me know if I can clarify the
question or send additional items to help.
2 Answers, 1 is accepted
Hello Hayden,
I have gone through the attached screenshots, but it will be difficult to guess why the other elements on your page change width. Please note that the Grid is wrapped in a DIV element and it will act like standard DIV with the default settings (filling the available space). If the Grid overlaps other components and is changing their width in some way, please try to isolate the issue in a stackblitz example so we can debug it locally.
Looking forward to your reply.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Iron
In regards of the Grid, setting the custom "min-width" style and having no explicit width to the Grid's container should be enough for a scrollbar to appear if the container holding the Grid gets too small. I have checked the new styles that you have shared with the "container-type", but this is related with the layout that you have on the page and not to the Grid itself, so it will be difficult to give any suggestions or thoughts about that solution, especially without having an example demonstrating the problem.
As for the "container-type", it should be supported in Firefox as well:
Notwithstanding, if further assistance is needed, please try to isolate the layout with a test Grid in stackblitz example that we can debug locally.
Rank 1
Iron
Hello,
Looks like the problem has been solved. The reason the default min-width stylings were not working as expected was because of my navbar element. It was not resizing the screen, instead just pushing elements to the side, out of the viewport. This caused the grid width sizing to work unexpectedly.
To solve this, I used a container query that would keep track of the width of the grids parent div.
.grid-bounds {
container-type: inline-size;
}
@container (max-width: 886px) {
.responsive-columns col, th {
min-width: 100px;
}
}<div className="grid-bounds">
<Grid data={contractData} className="responsive-columns">
{ . . . }
</Grid>
</div>however, this is not completely solved because it seems to have no effect in firefox. Looks like the container query does work and correctly applies the style. But it has no effect on the table, and does not cause it to scroll. It will still only squash the table.