Cannot get modal to scroll on overflow


#1

I’ve been hacking on a package for opening files ( https://github.com/Osmose/advanced-open-file ). It launches a modal with, among other things, a <ul> listing files and directories. When the list becomes too tall, I’d like it to be able to scroll.

However, setting overflow: auto on the list did nothing. overflow: scroll shows an empty scrollbar. I did some searching and found some info about ScrollView from atom-space-pen-views, but refactoring the package to use that view for the list itself did nothing either.

The view in question is at https://github.com/Osmose/advanced-open-file/blob/master/lib/advanced-open-file-view.coffee#L9. Anyone have any tips on how to get this list to scroll?


#2

Turns out my issue was that the modal dialog had no limits on its height, so it was extending to like 3000 pixels tall, which meant the modal scrolled off the screen without limiting the height of its contents.

My solution was to set height: 100% on the modal container with coffeescript, and then sprinkle some display: flex on the modal to force its child to stretch only to the available height. I did the same for the child so that the three elements stacked and stretched to their available space. It’s not clean but it works.

https://github.com/Osmose/advanced-open-file/commit/c54e6a9caa4f7fe88a3e050e233bebeb7a220751 is the commit in question. I decided to leave the ScrollView in despite it probably not doing anything as it kind’ve helps organize the code a bit better.

So yeah. Got a modal that you want overflow to happen in? Gotta tweak it’s CSS a bit. :smiley:


How to get panel to scroll on overflow without ScrollView?