How do make my popup scrollable?

Page layout & navigation
1

I’m trying to popup a scrollable list of selectable items.

My css looks like this:

.activitieslist{display:none;
                max-height:80vh;
                overflow:auto}

My html looks like this:

<div id=activities class=activitieslist>
<table class=popuplist>
   <tr><td>One</td></tr>
  <tr><td>Two</td></tr> 
  <tr><td>Three</td></tr>
  <tr><td>Four</td></tr>
  <tr><td>Five</td></tr>
</table>
</div>

If my list is long enough then I can scroll it on my desktop computer, but on my phone it won’t scroll.

Screenshot_20190614-190840
Screenshot_20190614-1908401080×2160 246 KB

If I change my css to this:

.activitieslist{display:none;
                max-height:80%;
                overflow:auto}

Then I can scroll it but it doesn’t look good because it goes from the top edge to the bottom edge of the screen.

2

In my opening post you can see a picture of what I want it to look like, and that’s how it looks when I set max-height:80vh but it doesn’t scroll.

When I change it to max-height:80% it looks like this and it scrolls but it looks ugly.

Screenshot_20190614-190814
Screenshot_20190614-1908141080×2160 249 KB

(I was only able to post a single image in my first post cause I’m a newbie)

So how do I get it to look like the first image, but scroll like the second image?

3

Of course after struggling with this for hours, and mere minutes after posting this question online, I find the answer.

The solution is to add the following to my popup initialization.

scrollLock: false

So now it looks like this:

var activities = $('#activities').mobiscroll().popup({
        display: 'center',
        buttons: [],
        scrollLock: false
    }).mobiscroll('getInst')

I found this code in one of the demos.

Which actually brings me to my next question. Where can I find the options for the popup control? I don’t see any link to documentation on the demo page.

4

Hi @Vincent_Wansink :wave:

Happy to see you figured it out!
Here you can find the documentation for Popup: https://docs.mobiscroll.com/jquery/popup#options :wink: