Fun Share: 1 way to avoid the keyboard covering your text input

Free Templates, Designs, and Block Combinations Made by Thunkable
1

Question that Prompted this Tutorial:

A common ask is how to avoid covering a text input located lower on a screen when the keyboard appears.

IMG_7242.PNG
IMG_7242.PNG1284×2778 95.3 KB
IMG_7243.PNG
IMG_7243.PNG1284×2778 124 KB

Goal:

Add a popup modal that allows users to enter text which won’t be covered by the device keyboard

Explanation:

There are many device dimensions and it can be hard to predict that your input wont necessarily be covered by a advice keyboard. In that case, you can use this method to allow your users to easily see the input and text they are entering.

Types of Apps You Might Use This In:

  • Store Apps

  • Canvassing Apps

  • Legal Apps

  • Medical Apps

  • Educational Apps

  • Financial Apps

  • Digital contracts

Blocks / Components Used:

Groups
Inputs
Labels

Link to Template / Example:

https://x.thunkable.com/projectPage/62d0195d99bfe40012c811b0

5 Likes
2

This is a good way for a single or two entries but would be a lot for a form filling experience. The trick is dependent on having the entry part to be in the top of the screen but when the list of fields goes long it will reach the lower part of the screen and the keyboard will start blocking part of the modal screen.

@jared, I like the way you tricked the view for the lower entry field which is just a label to show the modal screen.

2 Likes