Popup scroll behavior changed from Dojo to React – DataView footer no longer fixed

0
In the Dojo client, for our popup layouts, we typically used only the main placeholder without an additional container or scroll container.When resizing the popup, the scroll behavior appeared to be handled within the DataView:Only the DataView content area became scrollableThe DataView controls (e.g. footer/buttons) remained fixed and visibleAfter migrating to the React client, this behavior seems to have changed. With the same setup:The scroll behavior is no longer applied as beforeThe DataView no longer handles scrolling in the same wayAs a result, the footer/buttons are no longer consistently visibleHas anyone else encountered this change in scroll behavior when moving from Dojo to React?And if so:Did you implement a generic solution (e.g. layout structure, CSS, or container setup)?Preferably something that avoids having to refactor every popup individuallyAny insights or best practices would be greatly appreciated!
asked
3 answers
1

Hi Patrick


This is a well-known behavioral change. In your Popup_Layout:

  1. Add a Scroll Container (scroll direction: Vertical)
  2. Top region → place your Placeholder "Main" (scrollable content)
  3. Bottom region → place your Placeholder "Footer" (fixed buttons)
  4. Set popup height to a fixed value, not "Auto"


For quick fix you can go with CSS, But it is not the recommended approach


.mx-window .mx-dataview {

display: flex;

flex-direction: column;

overflow: hidden;

max-height: 100%;

}


.mx-window .mx-dataview .mx-dataview-content {

flex: 1 1 auto;

overflow-y: auto;

}


.mx-window .mx-dataview .mx-dataview-controls {

flex: 0 0 auto;

}
I hope this helps

answered
0

Hi, I have just updated this widget to simplify scrolling.
Any feedback is welcome.
Mendix Marketplace - Scroll Dynamic Height Container

answered
0
Hi Patrick,
Yes, the difference you're seeing can be expected when moving from the Dojo client to the React client. I would not rely on the old DataView behavior to keep the footer fixed, though.
The more reliable approach is to make the scrolling behavior explicit in the popup layout rather than relying on the DataView itself.
For example, structure the popup layout roughly as:
Modal Popup Layout
└── Scroll Container
    ├── Header
    ├── Content / Placeholder
    └── Footer
Configure the Scroll Container with the appropriate regions so that the content region is the scrollable region, while the header/footer remain outside that scrolling region.
This is actually the structure Mendix documents for using a Scroll Container to divide a layout into regions such as a header, content area and footer.
I would avoid trying to reproduce the old behavior with position: fixed on the DataView footer. Apart from being fragile, it can cause problems with different popup sizes and responsive layouts.
Also, the Data View footer is simply the section at the bottom of the Data View; Mendix does not document it as a sticky/fixed element.
So if you currently have something like:
Popup Layout
└── Placeholder
    └── DataView
        ├── Content
        └── Footer
I would change the layout rather than adding CSS to the footer:
Popup Layout
└── Scroll Container
    ├── Content region
    │   └── Placeholder
    │       └── DataView
    └── Footer region
        └── Buttons
If the footer buttons belong to the DataView because they need the DataView's object context, you can keep the buttons there, but the scrolling boundary should be controlled by the popup layout.
This also makes the behavior much more predictable across the Dojo and React clients.
One other thing worth checking after enabling React is whether the popup layout or any custom widget relies on Dojo-specific behavior. The React client replaces the Dojo view layer, and Mendix recommends checking Marketplace widgets for React compatibility when migrating.
So I would treat this as a layout/scroll-region issue rather than trying to restore the old Dojo CSS behavior.

One correction I'd specifically make

I wouldn't tell the person to add overflow-y: auto + position: fixed CSS immediately. That's a common workaround, but it's not the Mendix-supported structural approach.

Mendix's own layout documentation says a Scroll Container can divide a layout into regions, and the documented example specifically uses it for a popup layout with a header and footer.

That makes the above answer much safer to post in the Community.

answered