Skip to main content

Hi, I’m trying to create an interaction on a screen that allows content to move up or down based on when a keyboard is present.


For example, on a screen, I have a text field that will bring up the keyboard when user taps on the text field. When the keyboard comes up, I’d like all the content on the screen to push up so that the keyboard doesn’t cover up the textfield while the user types. Then when the user is done typing and closes the keyboard, the content will return to its previous position.


Is there a way to achieve this using overlays? Thanks!

did you find out ? Im having the same issue

Thanks

No, i still haven’t figured out how to do this so i have to build it manually.

@Linda_Pham1 I didn’t see a way to do that using an overlay, but below is a rough example of how you could accomplish that using smart animation between frames.


→ View example prototype

→ Get the file

Hello!! I found a way. I assume you are adding the keyboard to the screen as an overlay. You need to create an empty frame exactly where keyboard will be when it pops up, which would always be the bottom center of the screen for a keyboard. This means that the screen needs to be longer towards the bottom so you can fit the keyboard. Then, you add the interaction “scroll to” to the empty frame you created and the screen will scroll down to it, making it seem that the keyboard is pushing the content up. Make sure the interaction “scroll to” happens first than “open overlay” the keyboard doesn’t momentarily cover the content. The way I see it works best is having the “scroll to” in Instant and “Open overlay” in Move in - quick - 500ms

I hope that was clear enough, if not, please reply and I will gladly share an example.

Please, let me know if this helps anyone.

Cheers!

Terms & ConditionsCookie settings