Scroll container in listview?

Newbie question: In my application there is a page where users drag objects from a listview on the right and drop it on another listview on the left. This page has a Navigation layout with a scroll container at top level.  The issue is that the listview with the draggable widget can get quite long, whereas the listview with the droppable widget is empty by default. This means that users sometimes have to scroll all the way down to find the object they wish to drag, and then scroll all the way back up while holding the mouse button to find the droppable widget. This is not a very good user experience, of course. Ideally, I'd like to make the listview with the draggable widget scrollable. This way, user could scroll through the listview to find the object they're looking for and drag it to the droppable widget which would then be at more or less the same height. When I add a scroll container to the layout grid column of the page, I get an error that my scroll container has the draggable widget as a sibling (and that it should be either top-level or inside another scroll container). Next I tried to make a NavigationLayout with a scroll container at top level, and a second scroll container in a layout grid column but I am encountering the same error. As a newbie, that leaves me pretty much stuck...  Any suggestions on how to accomplish a scroll container inside a the column of a layout grid? Alternative solutions/workarounds?
2 answers

Hi Reinout,

Unforunately, mendix imposes limitations on where you can place scroll containers (I am sure it is for a good reason).

Did you try what happens if you add the scroll yourself with css.

Put the following code  on your listview under style:

overflow-y: scroll;
max-height: 100vh;

This will assure that the scroll bar is always visible (it will be disbled if the content fits vertically) and that the container will not be bigger than the screen.

Hope this helps,



If the standard scroll container is not a good fit, you can give a try to my widget

Scroll Dynamic Height Container


It's basically doing for you the CSS mentionned in the previous answer, it calculates the height dynamically to reach the bottom of the screen with a formula like : 100vh - Yposition