Keyboard deforming design components


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:

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.


1 Like

Have you set the column’s height to Absolute?


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

Hi @jakehqk ,

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?


1 Like

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

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

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

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:

1 Like