Scroll bar not visible in Datagrid2

0
Hello,I am using DataGrid2 with pagination, and I have a fixed table header along with vertical scrolling for the table content. I have also fixed the first column so that it remains visible when scrolling horizontally—this part works correctly. The issue is with the pagination bar at the bottom: on some screen sizes it becomes hidden, while on others it is visible. I want the bottom horizontal scrollbar and the pagination bar to always remain visible and properly fit within the screen. If the table has fewer rows, the scrollbar should appear just below the last row. How can I achieve this?
asked
1 answers
0

hi,


If your DataGrid2 pagination bar becomes hidden when using sticky headers + vertical scrolling + frozen first column, that’s a layout issue, not a bug in the widget. DataGrid2 draws the pagination and horizontal scrollbar based on the grid’s own container — if the container’s CSS or parent layout restricts space, the pagination can get cut off on some screen sizes.

Correct way to ensure pagination + scrollbar are always visible

1) Let the grid control its scroll area

Do not put the grid inside another scroll or height-restricted container. DataGrid2 manages its own body scrolling when pagination is enabled.

2) Avoid fixed heights on parent containers

If a parent has height: 100% or fixed px height, pagination may drop outside the visible area. Instead use a flex layout so the grid can grow/shrink naturally.

3) Use built-in pagination properties

DataGrid2 has properties under Pagination and Position of Pagination — put it either above or below the table with no CSS overflow restrictions.

Example layout pattern

Wrap the grid in a container without forcing its own scroll. Use CSS flex if needed:


.gridContainer {
  display: flex;
  flex-direction: column;
}
.mx-name-YourGrid {
  flex: 1 1 auto;
  min-height: 0;
}

This ensures the grid body scrolls and the pagination stays visible below the last row.

Why this works

DataGrid2’s paging and body scroll require the grid’s internal layout to compute space. If external CSS prevents the grid from expanding, the pagination bar can be clipped or hidden.

answered