# Layout Resizes when Keyboard is open

**URL:** <https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985>\
**Category:** Questions about Thunkable X\
**Tags:** beginner\
**Created:** [February 17, 2021, 10:53pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985 "2021-02-17T22:53:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 10:53pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/1 "2021-02-17T22:53:27Z")

</div>

Hello!  
When I open the keyboard the background image of a column goes up and so is the input textbox.

 ![11](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/b/4b925cea172b49b260f13d6921ba3b0123d13ae3.jpeg)  
 ![22](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/3/43e1ff82ed28352008dd031a3ae28f03b444e87e.jpeg)

Can someone help me solve this? Thank you!

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:01pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/2 "2021-02-17T23:01:21Z")

</div>

Have you taken a look at the already existing discussions on this topic?

> [@\[Reopened\] Keyboard changes screen layout](https://community.thunkable.com/t/reopened-keyboard-changes-screen-layout/681411):
>
> Hi everyone I know there are other discussions about “Keyboard hiding textbox” but I didn´t find the answer to my problem. A week ago I downloaded my app and everything worked just fine. It looks like this: Today I downloaded the same app with NO changes at all and I have this result: Literally I didn’t do anything from last week to today and now every s…

> [@Keyboard: Now MY layouts are knocked out of whack](https://community.thunkable.com/t/keyboard-now-my-layouts-are-knocked-out-of-whack/705991):
>
> Some people have had problems with squishing of components as the keyboard appears, but this is a feature ( a feature or a bug?) I was working with to my advantage. I now find that, without any changes my keyboard appears but covers the onward navigation button forcing the user to first hide the keyboard before proceeding. So, although my components were not being squished, they were being moved up the screen to where the user could still see them above the keyboard. Can I get this back or has i…

> [@Keyboard disorganizing Screen and Column Layout when a text input is pressed](https://community.thunkable.com/t/keyboard-disorganizing-screen-and-column-layout-when-a-text-input-is-pressed/1020432):
>
> I was actually searching around on the community forum to find out if there will be a solution to this issue, but from all the discussions I found on the community no solution have been found or arrived pls thunkable engineers should look sternly into this. The issue persists for past 8month and there has not been any solution. Am sure the issue must have caused a lot of users loss of income due to the issue. Pls help us look into it. Each time a text input is pressed, the keyboard pushes the …

> [@Keyboard is deforming the design](https://community.thunkable.com/t/keyboard-is-deforming-the-design/724093/2):
>
> Hey @nounab98278w, welcome to the Community wave This is currently being investigated. See this topic:

> [@Text input deconfigures screen layout](https://community.thunkable.com/t/text-input-deconfigures-screen-layout/695914):
>
> Hello friends, I hope you are very well. I would like to know if any of you have had this problem? started a few days ago. Pressing a text input opens the keyboard but deconfigures the entire screen. This does not happen in thunkable live, only when installing the app on android, I have not tested on iOS. I leave a comparison image.

> [@Keyboard deforming the design](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/8):
>
> The point is that the keypad has to show. So it will either push out the layout (scrolling out up the top), squeeze out the rest of the screen (which is the current situation), or need to cover up the bottom part of it. Apparently, this last option is the one you favor. What you can do then is temporarily make the arrangement (either column or row or whatever) smaller by changing its height to be less than what it contains. If the component is top justified, then everything that exceeds the no…

> [@Text input now squashes screen arrangement](https://community.thunkable.com/t/text-input-now-squashes-screen-arrangement/56934):
>
> Hi If someone out there could give me some help on this I would be really grateful; The project Ive been working on for the last 6 months or so uses a text input in the centre of the screen arrangement with a row of buttons along the top and a row along the bottom. I made the layout so the bottom row contains buttons for functions not relevant for use while text input is in use. Up to a few days ago when the text input was opened the keyboard covered the bottom row of buttons. I haven’t chan…

> [@Keyboard pop up shrinks my column and buttons](https://community.thunkable.com/t/keyboard-pop-up-shrinks-my-column-and-buttons/126738):
>
> i have a log in options and buttons but when you tap to type keyboard opens and the screen goes up what am i doing wrong

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 11:04pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/3 "2021-02-17T23:04:40Z")

</div>

it just says its fixed but its not working for me

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:07pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/4 "2021-02-17T23:07:01Z")

</div>

Try setting your screen to Scrollable. Does it help?

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 11:08pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/5 "2021-02-17T23:08:48Z")

</div>

I tried setting the screen or the column to scrollbale but still it is like that.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:10pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/6 "2021-02-17T23:10:44Z")

</div>

Did you try with setting your column height to either Fill container and Fit contents?

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 11:14pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/7 "2021-02-17T23:14:45Z")

</div>

Yes, I did! still no effect.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:19pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/8 "2021-02-17T23:19:42Z")

</div>

And did you try setting your column’s height to absolute?

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 11:25pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/9 "2021-02-17T23:25:56Z")

</div>

Do you have an example on how you set it up? 😃 Now that its absolute, i cant click on the text box input

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:28pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/10 "2021-02-17T23:28:28Z")

</div>

So you say that when you set the column’s height to absolute, you can’t click the text input? This is weird. Is the text input inside the column or outside it? Can you share your project or any screenshots showing your screen and elements layout?

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 11:32pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/11 "2021-02-17T23:32:16Z")

</div>

![Capture](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/c/4cc966d6c74589707df2f9376a3310cee83bc969.png)  
I put the bg image at the column1. i place column 2 and column 3 as spacing for the text input. Also tried using relative but the image still moves.

if i set the column1 to absolute, what value should I put for full screen?

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:36pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/12 "2021-02-17T23:36:30Z")

</div>

So the image I see in your first post is the background image of the top column? I am genuinely confused. I believe that you need to rethink your screen’s design.

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 17, 2021, 11:39pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/13 "2021-02-17T23:39:15Z")

</div>

column1 is the container column. inside column1 is the spacer columns (col 2 and 3) and the text box.

how should i do it? 😃

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 17, 2021, 11:52pm UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/14 "2021-02-17T23:52:02Z")

</div>

List of issues in your app:

1. Your screen’s vertical orientation is not set to Top.
2. You did not set the screen’s “Scrolling” property to “true” as I asked you to in my earlier message.
3. Your app’s asset “login-04.jpg” is actually taking up **the entire screen**. This is a really bad practice. You should crop the image to leave out any blank space.
4. You need to set your Column\_2 height to absolute (i.e. 300 pixels).
5. You don’t need a spacer column.

I did all of the above on a copy of your project and the screen behaves as expected. Go ahead and try it.

[https://x.thunkable.com/projectPage/602a5f14497af2023f20f35c](https://x.thunkable.com/projectPage/602a5f14497af2023f20f35c)

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 18, 2021, 12:05am UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/15 "2021-02-18T00:05:49Z")

</div>

![33](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/5/252dcffbb7d189d8d503f8c84f5d2dbf508064bc.jpeg)

Thanks for all the inputs! I can’t seem to see your remixed version of my app ☹

any idea with this problem?

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 18, 2021, 12:08am UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/16 "2021-02-18T00:08:58Z")

</div>

I did not post a remix of your project. I posted the link I used to troubleshoot the issues in your app. But I won’t do the changes **for** you otherwise you won’t learn anything out of this and you will come back next time with similar questions. So, fix the 5 issues I describe, check that they work and mark my response as the solution. Thanks

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 18, 2021, 12:19am UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/17 "2021-02-18T00:19:21Z")

</div>

no it did not work. attached the screenshot on my previous response

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 18, 2021, 12:21am UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/18 "2021-02-18T00:21:38Z")

</div>

> [@Deluxe](#):
>
> Your app’s asset “login-04.jpg” is actually taking up **the entire screen**. This is a really bad practice. You should crop the image to leave out any blank space.

Did you do this?

---

<div class="post-metadata">

**Author:** ![idietherdavepiyup](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@idietherdavepiyup](https://community.thunkable.com/u/idietherdavepiyup)\
**Post date:** [February 18, 2021, 12:25am UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/19 "2021-02-18T00:25:53Z")

</div>

Sorry. got it working now. I was hoping a full screen because I sometimes do a full pattern background or full image.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [February 18, 2021, 12:26am UTC](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985/20 "2021-02-18T00:26:19Z")

</div>

Great. So everything works ok now?

[Next page](https://community.thunkable.com/t/layout-resizes-when-keyboard-is-open/1104985.md?page=2)
