Scrollable datagrid

Hi all, at the page, as shown on the image I want the data grid to be scrollable and the "listen to the widget- data view stays at its place.  I can not get it done with the Scroll container widget. What are your suggestions? 
4 answers

yeah, this is a horrible problem.

So what we've found works well is to add a custom class to it that has a max-height (depending on the header) and then make the 2 cells have individual scroll sections. the css looks a bit like this.

  min-height: 500px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;

//100vh is 100% height of your broswer
// - 200px is the header + topnav.



I had the same issue in the past and built a custom widget for it -



Hi Jacob,

Another option would thats worked for me was to add this class to your datagrid and then define pixel widths for each column. 

.scrolly .mx-datagrid-content-wrapper {
     overflow-y: auto;



If I understand correctly, instead of making the grid scrollable you could make the listening part sticky.


1. Instead of a layout grid, use a table. Until Mendix implements Bootstrap 4 with flexbox support we need the table to force all columns to have the same height. Otherwise, no matter how sticky, the bottom of the column still pushes the element upward on scrolling.

2. Add a custom class to the listening part

3. In your CSS, add the custom class with: 'position: sticky' and 'top: 20px'. Play with the top value to fit your needs.


I hope this helps