Set the horizontal scrollbar to always stay on the left side when the page load

0
In Mendix 10.24, I created a page to display a data table. Because the table is too wide, I set the width of the Data Grid 2 to 150%. When the page loads, the horizontal scrollbar is always positioned on the right side. I want to configure it so that the horizontal scrollbar of this page is always positioned on the left side when the page loads.
asked
1 answers
0

This behavior is expected when using a wide Data Grid 2 (for example, 150% width). When the page loads, the horizontal scrollbar is automatically positioned on the right side, and Mendix does not provide a built-in property to control the initial scroll position.


There is no configuration option in Studio Pro to force the scrollbar to start from the left, and this cannot be solved using CSS alone.


The recommended approach is to use a small JavaScript customization. By wrapping the Data Grid 2 inside a container with a custom class and setting the scroll position programmatically, you can ensure it always starts from the left.


Because Data Grid 2 renders asynchronously, adding a small delay ensures the element is available before applying the scroll.


For a more robust solution, this logic can also be triggered via a JavaScript action in a nanoflow on page load.


document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
        const el = document.querySelector(".dg-scroll-wrapper");
        if (el) {
            el.scrollLeft = 0;
        }
    }, 100);
});



Important:

Make sure your Data Grid 2 is wrapped in a container with the class:

dg-scroll-wrapper


answered