Sticky container

I have a layout grid with two columns. On the left side are input controls and on the right side is a graph. The page is longer then the browser window. I would like that when you scroll down the graph also moves down (like a sticky navigation). I tried this using the bootstrap affix plugin ( Putting the attributes 'data-spy="affix" data-offset-top="60" data-offset-bottom="200"' on the div of the chart and including bootstrap and jquery as external library on the widget. You can see my changes in Is there any way I can get this working within Mendix? Or maybe another solution to achieve the same result?
2 answers

Have you tried a scroll container in your page, and added a right-region to it? Then you can put your main input controls in the Content, and the graph in the right region. They will scroll separately


I have never tried using the Affix option from bootstrap, but a quick test with the w3schools examples indicates that the affix plugin works based on scrolling of the body.

All standard Mendix templates you can download use scrolling withing the placeholders, the default affix plugin configuration didn't seem compatible with scrolling within a div (the mendix regions translate to divs in the html).

I'm expecting that if you'd change the scroll behavior of the scroll container to 'full widget' rather than 'per region', that will instruct the platform to scroll the entire body and I'd expect the affix plugin to work. But in that case your navigation won't stick to the top anymore (which you might also be able to resolve with affix).

I haven't used the affix plugin before, maybe there are same people who were able to get this to work within a scrollable div?