Display wide grids with horizontal scrolling

1
I have a need to display a wide data grid and filter the records. Attempt #1: Overflow The first attempt I made was to use fixed width columns adding overflow-x:auto; style to the grid. I now have a horizontal bar at the bottom of the grid and my search criteria fit the width of the page. The problem is that in order to see the right most part of the grid, I need to page down to see the horizontal scroll bar, scroll, and then page up to see the data. Users are very unhappy. Attempt #2: Container Width My second attempt was to add style width: 1800px; to the container which holds the grid. Now the horizontal scroll bar appears at the bottom of the browser (excellent!!!) but my search criteria Search button is way to the right and not visible on the screen. Question The users are happy having horizontal scroll bar at the bottom of the browser screen, but need the search criteria fit the width of the screen. How can I achieve it?
asked
2 answers
3

You may have to apply this styling from your theme’s stylesheet. Applying css to the data grid itself will apply to the whole view. You need to apply styling to the specific part within the view. Try this:

// SCSS
.myDataGrid {
    .mx-grid-content { // The table portion of a data grid.
        overflow-x: auto;
    }
}

// CSS
.myDataGrid .mx-grid-content {
    overflow-x: auto;
}

 

answered
1

To add to Jason’s answer. I’ve used the method in the post below and its worked well.

https://forum.mendix.com/link/questions/9832

 

I set a fixed width on my container that surrounds my datagrid. And then in the modeler or as a class I apply the styling:

overflow-x:scroll;

 

answered