.overflow-visible {
.table .th .column-header span {
display: flex;
flex-grow: 1;
overflow: visible;
}
}
Try adding this class on your datagrid
After having been stuck for a day I found a workable solution.
You need to create a css class and add it to your datagrid 2.
I got the best results by setting the class in css as following:
.scrollable-datagrid {
.widget-datagrid .table {
overflow-x: auto; // the scrollbar is placed inside of the grid so the page number and filters don't fall out of the view when scrolling
.td {
min-width: 100px; // gives every cell a minimum width of 100 pixels. Adjust according to need and specs.
}
}
}
Add scroll container and put your datagrid2 inside the default space. It would enable scroll automatically once the size is reduced.
Do not add top, bottom, left or right regions unless its your requirement to add scroll on height or side regions.