Mobile issue - grouped elements displaying in responsive preview, but not when running on iPhone

[adove]

Bubble Editor - shyfty

I have a workflow to show a group when a button is clicked. (see screenshots below - “report an issue” shows a group that contains a background shape, text, and buttons)

In the responsive previewer, it looks like everything should be fine on all devices including mobile, However, when I test in Safari on an iPhone, the only part of the group that displays is the background shape (so no text or buttons). The weirder thing is, if I pinch to zoom out or rotate the phone to landscape, then the text and buttons display and stay there.

I’ve been trying to troubleshoot this for a few days and can’t figure out if I’m missing anything in responsive settings or if this is a bug.

Thanks in advance for any help!

1. Workflow on “report an issue” button shows a group in screenshot 2

2. “Drag map overlay” group shown includes background image, text, and buttons

3. Responsive preview - all looks good

4. Testing in Safari on iPhone6 (initial view before rotating or zooming out shows additional content)

[adove]

Update: I replicated the original “group” being shown/hidden as a “floating group” instead, and the mobile issue was solved.

Also, I changed the background color of the floating group itself to my desired blue, rather than adding a shape into the group to achieve the background color like my original.

Not sure exactly which one of these changes did the trick, but all is displaying as intended on mobile now.

[andrewgassen]

I noticed your map was zoomed in on Dupont circle. Are you in the DC area?

[adove]

indeed, Dupont Circle! hoping to start testing this app with some DC area cyclists soon

[andrewgassen]

That’s cool, I live in Fairfax but work in downtown DC at Pivotal Labs. We just opened our “permanent space” in downtown DC near Farragut Square. We should meet up!

[William1]

Nice looking application. I could not access the bubble editor to check the preview settings. The responsive view works really well on my Motorola Moto G4.

Is this what it ment to be showing? @adove

[adove]

Thanks @William1 ! Once you click “report issue”, the view below should display - with new text, buttons, and a gray pin icon. That’s the step I was originally having trouble with, but it’s resolved now (at least on the iPhone 6 + 7s I’m testing on).

[William1]

Hey @adove I checked the web app again and it shows this

If you can fix “new text” to be responsive then you got a really good application.

How did you manage to get the drag the map function to work with Bubble?

[adove]

Thanks for catching that, fixed the text to display as intended.

Do you mean how is the center of the map stored after dragging? The map element in Bubble has a checkbox for “allow zooming and dragging”. And basically the gray pin is centered within the map element… then when the user clicks “continue”, there is a workflow that creates a new thing to store the current center of the map as a new location.