Scrolling in Mendix 10

0
I would like to ask on how to remove scrolling in the page and also widget.
asked
2 answers
7

In Mendix, scrolling can come from two different places: the page itself or a widget inside the page such as a Data Grid, container, or List View. Because of this, you usually need to check both the page layout and the widgets used inside the page.


First, check the page container. Open the page and select the Layout Container (Atlas layout) or the main container of the page. If the page is scrolling, it usually means the container height is larger than the viewport. One common way to prevent this is to apply a custom CSS class that hides the overflow.


.no-scroll {
  overflow: hidden;
  height: 100vh;
}


After creating the class, apply it to the main container of the page. This will prevent the page itself from scrolling.


Sometimes the scrolling does not come from the page but from a widget container. Widgets such as Data Grid 2, List View, or containers with a fixed height can create their own scroll area. Check if the widget has its Height set to Fixedand Overflow set to Auto or Scroll. If so, changing the height to Auto and overflow to Visible usually removes the internal scrollbar.


You can also override the widget behavior with CSS if needed.


.no-widget-scroll {
  overflow: visible !important;
}


Apply this class to the widget container where the scroll appears.


In most cases, scrolling happens because of a container with fixed height, overflow set to auto, or a DataGrid2 configured with internal scrolling. Using the browser developer tools (F12 -> Inspect) can help identify which element has overflow: auto, making it easier to adjust the layout or styling.


If this resolves your issue, please mark the answer as accepted so it can help others as well.


answered
0

Hi,


In Mendix 10, scrolling is usually controlled either by the page layout containers or by the widget/container styling.

If you want to remove scrolling at the page level, check the layout container that wraps the page content (often layout-content or region-content). In Atlas UI this container usually has overflow:auto. You can override this by adding a custom class and setting:


.no-scroll {
    overflow: hidden;
    height: 100%;
}

Then apply this class to the container or page wrapper.

If the scrolling comes from a specific widget or container (for example Data Grid 2, a scroll container, or a div container with fixed height), remove the fixed height or change the overflow behavior. For example:


.no-scroll-widget {
    overflow: visible;
}

Apply this class to the widget container so the content expands instead of creating a scroll area.

Also check whether the scroll is coming from Atlas layout classes such as mx-scrollcontainer. If so, you can override it with custom styling in your theme file (for example theme/web/main.scss).

In most cases the scroll behavior is not coming from Mendix itself but from the CSS overflow property applied by the layout or container, so adjusting the container styling usually resolves it.

answered