Popup Issue on Mobile Device

Hey all, I’m having a weird issue with a popup modal on my Samsung Galaxy S6 device. Here is the link, please check it on your phones if you’re interested in playing along: Products

The problem is that the modal pops up and looks fine, exactly how I want it to. The user taps the email input to add their address, and the keyboard pops up (exactly how it should). Now, the problem is that the input field isn’t visible when the keyboard is up, and there’s no way to scroll. I’ve used other mobile websites where the screen automatically scrolls to keep the input visible, is this something we can do on Bubble?

To open the popup, scroll all the way down and tap the last button on the page.

Here’s are some screenshots of what’s going on. Image 1 is what it looks like when Keyboard is down. Image 2 is what it looks like when I tap the input field.

I don’t get a popup when I go to the URL

Nevermind, found the button at the bottom. The field seems to be set to focus on open and my screen scrolls to show the field automatically. I’m on a Moto X.

Had a quick look on Browserstack, and looks like an Android issue, does the same on all the Galaxys as well as Notes.

iOS Safari scrolls it to the input box.

Use a group instead ? Would that work ?

Whoops, I forgot to tell y’all how to trigger the popup. My mistake, I’ve edited the post to include that helpful bit of info. @NigelG I’ll try it with a group and see what happens, thanks for the thought.

Did you find a solution for the issue? Have the same problem

1 Like

@potentialthings, I am having this issue as well on my mobile with a popup. Were there any specific steps you took to solve this? (as I noticed your example is working fine on my mobile)

Nope, I didn’t do anything. As far as I know, it’s pure luck it works right for you lol

It appears that if the popup is taller than the height of the phone’s screen, then it will focus on an input correctly, with the keyboard below it.

However, if the popup is less than the height of the screen, once it focuses on the input, it then adjusts so the top of the popup is aligned with the top of the phone’s screen. This adjustment moves the keyboard over top of the input.

Not sure how I can work around this unless I redesign the popup to be very tall, which is not an ideal UI for a popup

1 Like