Responsive button with keyboard

[thealbertodelrey]

Bubblers,

I want to achieve a more native feel with my app when a user opens their keyboard. Currently, I have a screen where a user can click into the fields and enter their details. I also added a floating group at the bottom of the screen with my button inside it.

When I test the page, I click into the input fields the keyboard appears but is covering the button so I have to scroll to see the button.

But,

I’d like to, instead, have the button move up when the keyboard appears so it feels a little native.

Is this possible without having to break bubble so much?

[hergin]

You can do something without too much effort. When the input box is focused, play with the margin of the button at the bottom. See demo below:

I just change the margin, that’s it:

Of course, now you have to distinguish if it is mobile device or not. Because you might end up with something weird if there are no keyboards See below:

For better or worse, if you want to check, here is the editor: Tests for Forum 11 | Bubble Editor

[thealbertodelrey]

Is there a more native way to do this?

Despite building and designing for mobile devices only, the keyboard height might vary depending on each OS.

[hergin]

I don’t think so.

[GH5T]

The only way to “natively” achieve this is to get a way to hook into the user using their keyboard, which is not possible with vanilla Bubble.

What @hergin recommended is your best bet. Ideally you just setup a state for when either of the inputs are “focused (on mobile)”, bring the margin up. I’d also look into adding some animation speed to it using the transition speeds on the Appearance tab.