Skip to main content
Question

How to create interactive keyboard that pushes content up using overlay?


Linda_Pham1

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!

This topic has been closed for comments

Magdalena_Czakoova

did you find out ? Im having the same issue
Thanks


Linda_Pham1

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


Nate_G
  • Power Member
  • October 13, 2023

@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


Agustin_Gonzalez

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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings