Hi,

This is expected after 10.24. DG2 now manages its own scrolling inside its container instead of the page.

Quick fix:

Wrap the DG2 in a container and force the scroll there:

.custom-scroll-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow-x: auto;
}

Apply this to the parent container, not the DG2 itself.

Alternative (more direct):

.mx-datagrid2-content {
  overflow-x: auto !important;
}

Using !important is reasonable here since Atlas/Mendix styles can override yours.

Summary:

Scrollbar is now tied to DG2 → you need a container-level override to mimic old behavior.

If this resolves your issue, you can mark it as accepted.

Hi, this behavior changed in newer Mendix versions due to updates in the DOM structure of DataGrid 2, so the scrollbar is now bound to the grid container instead of the viewport. Simply using overflow-x: auto is no longer enough because the scroll is controlled inside nested divs. To achieve a “fixed bottom scrollbar” again, the recommended approach is to wrap the DataGrid2 inside a custom container and control the layout using CSS. For example, place the DG2 inside a container with a fixed height and apply:

.dg2-wrapper {
  height: calc(100vh - 200px); /* adjust based on your layout */
  display: flex;
  flex-direction: column;
}

.dg2-wrapper .mx-datagrid2 {
  flex: 1;
  overflow: auto;
}

If you specifically want the horizontal scrollbar always visible at the bottom of the screen, you’ll need a workaround such as creating a synced fake scrollbar (using JS) or forcing the parent container to take full viewport height so the scrollbar naturally stays at the bottom. Pure CSS alone cannot “detach” and fix the native scrollbar to the viewport once it’s inside a scrollable div. So, the Mendix-aligned solution is to control container height and scrolling behavior, or implement a small custom JS solution if you need exact fixed positioning.

Hi,

This behavior change is expected after upgrading to 10.24.x. In recent versions, Data Grid 2 uses a more contained layout structure, so the horizontal scrollbar is now tied to the grid container instead of the page.

That is why the scrollbar is no longer fixed at the bottom of the screen.

Why your old approach no longer works

Previously:

• The page handled overflow (overflow-x: auto)
• So the scrollbar appeared at the page level

Now:

• DG2 has its own internal scroll container
• Overflow is handled inside the widget itself
• So page-level CSS no longer affects the scrollbar position

Working Solution (CSS approach)

To get similar behavior (scrollbar always visible at bottom of screen), you need to control the layout container instead of the grid itself.

Option 1: Make the page layout use full height + flex

Apply this to the parent container:

html, body, .mx-page {
    height: 100%;
}

.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dg2-wrapper {
    flex: 1;
    overflow-x: auto;
}

Then:

• Wrap your Data Grid 2 inside dg2-wrapper
• Ensure no nested containers override overflow

Option 2: Force horizontal scroll at page level

If you want the scrollbar at the bottom of the screen:

.mx-page {
    overflow-x: auto;
}

But for this to work:

• DG2 must not clip overflow internally
• So ensure parent containers don’t have overflow: hidden

Option 3: Use full-width + avoid nested scroll

Best practice in 10.24+:

• Avoid nested scrollbars
• Let either:
  • Page scroll, or
  • Grid scroll

Not both

Trying to force the scrollbar outside DG2 using only CSS is limited because:

• DG2 renders internal wrappers
• Some overflow behavior is controlled by the widget itself

• Use a full-height layout (flex-based)
• Keep DG2 as the main scroll container
• Or move scroll responsibility to the page (but avoid conflicts)

• Behavior changed due to DG2 internal layout updates in 10.24
• Scrollbar is now bound to the grid container
• Fix requires adjusting parent layout (flex/height/overflow)
• Pure overflow-x: auto on page is no longer sufficient