Make Action Sheet scrollable

Questions
1

Hello,
I want to use the Action Sheet with 2 .action-group elements inside, same as on the example in the docs.

I need the first one to contain many buttons and it’s height to not exceed the height of the screen. Which means the overflow-y need to be set to scroll.
The second one will be just like on the screenshots - a cancel button.

Is that possible with any Framework7 class or should i add some custom styling? I tried adding many buttons in the top .action-group but it just pushes everything down outside the screen. I need to keep both groups on the screen and to be able to scroll the top one.
Exactly like this:

RPReplay_Final1707574863-ezgif.com-resize

Or do you have any other idea how to make such a list (same look/feel) using another component?

2

I usually pass the parameter cssClass: 'actions-scrollable', and control the height using the class .actions-scrollable in css;

example:

.actions-modal.actions-scrollable .actions-group:first-child {
    max-height: 90vh;//you can replace this with any value or calc that works for you
    overflow: auto;
}

if you have more than 2 groups, you can adjust the css to achieve any desired result,

Regards,

EDIT:

Another cool thing you can add:

.actions-modal.actions-scrollable .actions-group:first-child .actions-label {
    position: sticky;
    top: 0;
    z-index: 20;
}

this makes any actions-label item to stick to the top during the scroll (like the label sort in your video) and it works great if you have many labels in the list.

1 Like
3

thanks, that’s pretty much the same i tried. Didn’t think of the position sticky, nice idea :slight_smile:

The problem with mine and your solutions remains the same - i can’t scroll the list by tapping on a list item that is button and drag up/down, nothing happens except for the button gets the active state as i tap on it. I can scroll the list by dragging the label, but never on any of the buttons in the list.
Not sure if there’s some event that disables this.