How do I create an action sheet (aka: card) for a mobile app?

Need help Mobile
1

Hi everyone,

I’m building a native app with Bubble and I’m trying to create a card that slides up from the bottom similar to iOS “Action Sheets” which you can find here in Apple’s Human Interface Guidelines.

I can design a group to look the correct way but I can’t figure out how to animate it to slide up from the bottom or be swiped away when the user swipes down. Nor can I figure out how to create vertical scrolling within a group (eg. the card) that has a set height and is locked to the bottom of the frame. The content of the card will vary - it won’t always be text only.

See image for reference:

Registration (Sign Up)
Registration (Sign Up)375×812 30 KB

2

Nice I just done this yesterday

Create a floating group that’s larger than any screen the app will be used on, float it relative to the bottom and position it at the bottom of your page.

Create in it a state called “showing”.

In the floating group set a condition “if floating group showing is not empty this floating group is visible

Make it not visible on page load

Create you card inside the floating group

Condition when floating group showing is “cardname” this group is visible

Set to not visible on page load

Enter the workflow of element you want to be clicked to make the card visible and create the workflow set state of FG Showing to cardname

If you want click away functionality create a group inside the FG that is the same size and connect a workflow that when the group is clicked to set the state to empty

3

For swiping you can use the swipe detector plugin from zeroqode and the same workflows

Scrolling you may need HTML class that allows overflow: scroll to be assigned to the element or use a repeating group with a single cell

For animation you can use animate and slide in from bottom and slide down for top however I found custom HTML to be more smooth

4

Thanks Chad! I’ll give it a try.

5

Hey @jacobjolibois

Did you manage to get this set up in a satisfying way? I’m running into a whole bunch of issues, so would be interesting to hear how it worked out for you.

@chad
When you set this to float to bottom, instead of top, how do you deal with various screen resolutions? Would love to know what HTML you used for sliding in from bottom?