Forums Home / Wijmo / General Discussion
Posted by: tdnooij on 26 November 2024, 12:08 pm EST
tdnooij
Posted 26 November 2024, 12:08 pm EST - Updated 26 November 2024, 12:13 pm EST
Hi,
I would like to know if there is a way to match scrollbars to the FlexGrid. Specifically, if we have a container that is wider than the FlexGrid, I would like the scrollbars to align with the table rather than the container size.
Similarly, is it possible to achieve the same effect for horizontal scrollbars?
What are the possible implementation solutions to achieve this effect?
akshay.rajput
Posted 27 November 2024, 3:30 am EST
Hi Thomas,
I would suggest you to try setting the display as ‘inline-block’ for the FlexGrid parent element. Example:
div:has(.wj-flexgrid){
display: inline-block;
}
OR
You can set the FlexGrid width as ‘fit-content’. Example:
.wj-flexgrid{
width:fit-content
}
I hope this resolves your query!
tdnooij
Posted 8 December 2024, 2:06 pm EST - Updated 8 December 2024, 2:11 pm EST
Hi Akshay,
Unfortunately, the first suggestion doesn’t work, even in your demo. It adds a 15px space next to the scrollbars.
The second option doesn’t display any scrollbars in my case.
Here’s a demo highlighting the issues I’m experiencing:
Context:
I am dynamically generating a grid with a table using relative units. I would like the table to render within the available space and show scrollbars when necessary (as in the first row). However, when the table is smaller than the available space, I want it to adjust to its content and display scrollbars next to the table.
When the table is larger than the available space, it works fine. However, it’s not adjusting to the available space as expected.
Using the suggested solutions causes the following issues:
Scrollbars disappear.
The table is displayed larger than it should be.
Only the vertical scrollbar is displayed, with the horizontal scrollbar appearing only after scrolling down the vertical one.
Grid_Sizing_Overview_React2.zip
Greetings,
akshay.rajput
Posted 10 December 2024, 2:48 am EST - Updated 10 December 2024, 2:53 am EST
Hi Thomas,
I would suggest you to try and set the max width as 100% this way the FlexGrid;'s width will not expand more than the parent width.
Sample CSS:
.wj-flexgrid {
max-width: 100% !important;
width: fit-content !important;
}
For reference, please refer to the following sample application: https://stackblitz.com/edit/js-gwma4u?file=style.css
I hope this resolves your query.
tdnooij
Posted 17 December 2024, 1:31 pm EST - Updated 17 December 2024, 7:49 pm EST
UPDATE:
I SOLVED MY PROBLEM BY SETING PARENT AS FLEX CONATINER
position: relative;
display: flex;
flex-direction: column;
Hi Akshay,
Unfortunately, your demo is not relevant to my problem as I am using React FlexGrid with relative units.
Please take a look at my demo:
https://stackblitz.com/edit/vitejs-vite-h6xv8ed8?file=src%2FApp.css
I would expect the 2nd and 3rd grids to have scrollbars, as all FlexGrids have the properties you mentioned above.
css
.wj-flexgrid {
max-width: 100% !important;
width: fit-content !important;
max-height: 100% !important;
height: fit-content !important;
}
Could you please elaborate on how I can get scrollbars next to the grid in this setup?
vivek.pannu
Posted 18 December 2024, 8:49 am EST
Hi Thomas,
We are glad to know that the issue is resolved now, thank you for updating us.
After taking a look at the sample you shared, we found that, setting the following CSS is working fine with the current implementation in the sample -
.wj-flexgrid {
max-width: 100% !important;
width: fit-content;
height: 80%;
}Actually, the CSS applied on parent elements of the flexgrid could affect the display behavior of the grid so we need to adjust the flexgrid height and width accordingly, also the height and width property values could vary in different situations.
Here’s an updated sample for your reference - https://stackblitz.com/edit/vitejs-vite-9b4l9wcz?file=src%2FApp.css
In case, if there is something we missed, please let us know.
Regards,
