Unwanted horizontal scrollbar on every page in Mendix 11

0
Hi everyone, In my Mendix 11 project, every page I create shows an unwanted horizontal scrollbar, even when the content clearly fits within the viewport. This happens on all kinds of pages, including: Pages generated by Marketplace modules Pages I build myself using Data Grid, Data Grid 2, Layout Grid, etc. Even very simple pages with just a few elements (no custom widths on widgets) still display a horizontal scroll bar. Has anyone experienced this behavior in Mendix 11? What could be causing a global horizontal scrollbar like this, and how can I track down and fix the root cause (possibly related to layout, scroll containers, or custom SCSS)?   Thanks in advance for your help!
asked
2 answers
1

I did not experience this issue in Mendix 11 before, so it is likely that some custom CSS or a theme override is affecting the default styling. Hiding horizontal overflow globally is possible by adding CSS such as html, body { overflow-x: hidden; }, but this will not work in cases where horizontal scrolling is actually needed in the application because it disables horizontal scrolling everywhere. A better approach is to use the browser’s DevTools to visually inspect the page and identify which element exceeds the viewport width. Select elements and check their box model (content, padding, and margins) in the Computed/Layout panel, then move up the DOM hierarchy until you find the exact container that causes the overflow, and adjust its styling instead of hiding overflow globally.

answered
0

You can try the code below in main.scss (adjust if needed):

 

@import "custom-variables";


.mx-dataview > .mx-dataview-content {
    overflow-y: unset;
}

 

image.png

answered