How do make my popup scrollable?

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

My css looks like this:


My html looks like this:

<div id=activities class=activitieslist>
<table class=popuplist>

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

If I change my css to this:


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.

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.

(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?

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

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.

Hi @Vincent_Wansink :wave:

Happy to see you figured it out!
Here you can find the documentation for Popup: :wink: