Keyboard deforming design components

Questions about Thunkable
, , ,
1

Hello,

I have extensively read many posts in this topic but I have yet to see a consistent, straightforward solution to this problem.

When I click on a text input, the keyboard squashes the columns causing all the components to overlap each other. Below is an image to illustrate:

Screenshot_20210413-140610_Thunkable
Screenshot_20210413-140610_Thunkable720×1600 159 KB
Screenshot_20210413-140604_Thunkable
Screenshot_20210413-140604_Thunkable720×1600 97.6 KB

I understand from reading through different posts that the solution may lie in the ‘overflow’ or ‘scrollable’ settings, however, I have altered these settings for a while and nothing seems to work. If someone could show a straightforward way of solving this issue, it would be much appreciated.

Thanks!

1 Like
2

Have you set the column’s height to Absolute?

2 Likes
3

Thank you for the reply. Would i need to set all columns height to absolute, or just the columns that contain components?

4

Hi @jakeheron ,

I’ve seen similar behaviour to this in the past but this might be new?

Are you using groups and the drag and drop editor?

Thanks

1 Like
5

Hi, I am using the old snap UI, however, I have experienced similar issues using the drag and drop UI .

6

If some are relative and some are absolute then the relative ones will get “squashed” when the keyboard which probably explains what’s happening here.

1 Like
7

Alright, thanks for your help, I will try this. What exactly is the difference between relative and absolute?

8

Absolute means that it’s the exact size specified by you when you design your app, relative means that it depends on the amount of space available on screen

See more in the docs here:
https://docs.thunkable.com/intro-to-sizing

1 Like