hi,

This issue happens because a Scroll Container inside a modal popup needs a fixed or calculable height.

In a modal layout, if the Scroll Container (or any parent container) has height = auto with no limit, the content will not render visibly. When you place the same widgets outside the Scroll Container, they appear because they are no longer constrained by the modal layout.

Correct fix (works 100%):

• Wrap the Scroll Container in a parent container
• Give that parent container a fixed height or max-height (for example using vh)
• Enable vertical scrolling on the Scroll Container

Example CSS:

.modal-scroll {
    max-height: 80vh;
    overflow-y: auto;
}

Apply this class to the Scroll Container or its parent.

Set a fixed height for the modal

The most common and easiest fix is to give the modal a defined height so the Scroll Container has space to render its content. Open the Page Properties of the modal page, go to the Layout tab, and check the height setting. If it is set to Auto, try changing it to a fixed value such as 500px. This gives the Scroll Container a clear boundary to work within.

Use a Container or Layout Grid instead of a Scroll Container

If you don’t specifically need the Top / Bottom / Left / Right regions that a Scroll Container provides, you may not need it at all. In many modal use cases, a simple Container or Layout Grid works better. You can make it scrollable by adding custom styling in the Appearance -> Style field, for example:

max-height: 400px; overflow-y: auto;

This approach is often simpler and more predictable inside popups.

Check the Scroll Container settings

If you do need to use a Scroll Container, make sure its configuration is correct. In the Center region, verify that the Scroll behavior is set to Per region rather than Full page. Using “Full page” inside a modal can prevent the content from becoming visible because the popup itself does not control the full page height.

Hi, I have just updated this widget to simplify scrolling.

Any feedback is welcome.

Mendix Marketplace - Scroll Dynamic Height Container

Hi Nithya,

This is usually related to how the Scroll Container is placed inside the modal popup.

A Scroll Container needs a defined area to calculate its scrolling region. If its parent/container does not provide a calculable height, the content inside the Scroll Container can appear to be missing, while the same content works when placed outside it.

I would first check the popup page structure:

• Make sure the Scroll Container is not unnecessarily nested inside another layout/container.
• If you are using a Scroll Container, set its Scroll Behavior to Per region.
• Make sure the parent of the Scroll Container has a height that can be calculated. For a popup, a max-height based on the viewport can be useful.

For example, if you need a custom scrollable area, you can use a container with:

max-height: 80vh;
overflow-y: auto;

and place the content inside that container.

Also, if you are using the standard Atlas modal popup layout, check whether you actually need an additional Scroll Container. The popup layout already provides the structure for the popup content, so adding another Scroll Container can introduce an unnecessary nested scrolling context.

Mendix documents that a Scroll Container can be used on pages and layouts, and that its Per region behavior creates a scrollbar when the content does not fit in the region.

So I would first try this:

Modal Popup → Data View → content

instead of:

Modal Popup → Layout Grid/Container → Scroll Container → Data View → content

If the content is long, give the scrolling container/parent a calculable height rather than relying on height: auto.

If you can share a screenshot of the popup page structure in Studio Pro (especially the layout, Data View and Scroll Container hierarchy), it should be possible to identify exactly which container is preventing the content from being rendered.