# Keyboard deforming the design

**URL:** <https://community.thunkable.com/t/keyboard-deforming-the-design/113218>\
**Category:** Questions about Thunkable X\
**Created:** [June 19, 2019, 6:15pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218 "2019-06-19T18:15:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![db82203608aa4b](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/db82203608aa4b/32/33512_2.png) [@db82203608aa4b](https://community.thunkable.com/u/db82203608aa4b)\
**Post date:** [June 19, 2019, 6:15pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/1 "2019-06-19T18:15:29Z")

</div>

Hello…

My app is here

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/6/c634c029ec65560bd45175aa860b0d1b328ad18e.jpeg)

So, when i need put numbers he deforming like this

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/b/8ba53ae2f7bbf1edf5e0f532c203a188b7f22f49.jpeg)

Its possible the keyboard stay on top?

I have another question too… if you see… the first 0 numbers you need put other value, so all 0 are in the center from text\_imput… But under the total are labels and the 0 is on the top… i need this 0 is in the center… i put all textalign “center” but i dont know why in the text\_imput he is perfect and in the label is on top…

---

<div class="post-metadata">

**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\
**Post date:** [June 19, 2019, 6:51pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/2 "2019-06-19T18:51:40Z")

</div>

Go to design, and on the screen, go to the advanced -\> positioning and for the Overflow, specify ‘hidden’.

I haven’t tried it (I decided that I did not want the system to try and out-think me, so I implemented my own keypad, which I decide where it will go and how big) but that is what I would be looking at.

As for the alignement of label and text\_input, that is the way the system is implemented, labels are tinier because they do not need to have a clickable border. Go to the property of the label, advanced -\> spacing, you will see entries for margin and padding. You can adjust the position this way.

---

<div class="post-metadata">

**Author:** ![Yukold](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/yukold/32/35122_2.png) [@Yukold](https://community.thunkable.com/u/Yukold)\
**Post date:** [June 19, 2019, 8:59pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/3 "2019-06-19T20:59:25Z")

</div>

did not work put hidden, he just stop stay on top just in the tools bar (battery, clock and your mobile phone operator)  
like this:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/e/5eae06781f4e4c131216dc548fd3385ebd1dd11f.jpeg)  
But i think your idea to create your own keyboard is so genius, its possible to iOS system too? because if are possible i will create my too =D

And this alignement dont work too, but i search how to do: label\>advenced\>text style\>lineheight (i put 40 and appears in the center from the label)

example:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/f/afa71d3fee8909e17c4d1451fb6949fda53dd855.jpeg)

---

<div class="post-metadata">

**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\
**Post date:** [June 19, 2019, 9:52pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/4 "2019-06-19T21:52:07Z")

</div>

Of course it is possible.

For each number button, you have an event that appends the value of the digit to an accumulator, character by character. There is a need for additional logic to handle and dismiss the out of sequence or pathological entries, like attempting to put the decimal separator twice, or dismissing leading zero, managing the back-space and so on; but it is definitely doable.

---

<div class="post-metadata">

**Author:** ![Yukold](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/yukold/32/35122_2.png) [@Yukold](https://community.thunkable.com/u/Yukold)\
**Post date:** [June 19, 2019, 11:08pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/5 "2019-06-19T23:08:02Z")

</div>

You give a link from any project you use? i can see and will be more easy for me understand how to do.

i still need the keyboard in the top and not deforming when i need use. 😫

---

<div class="post-metadata">

**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\
**Post date:** [June 20, 2019, 12:59am UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/6 "2019-06-20T00:59:58Z")

</div>

My program is in Classic, so that is not readily accessible.

---

<div class="post-metadata">

**Author:** ![Yukold](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/yukold/32/35122_2.png) [@Yukold](https://community.thunkable.com/u/Yukold)\
**Post date:** [June 20, 2019, 9:29pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/7 "2019-06-20T21:29:00Z")

</div>

Ya so bad =(

But congratulations!! 😉

i still need the keyboard in the top and not deforming when i need use. 😫  
any idea?

---

<div class="post-metadata">

**Author:** ![CBVG](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/cbvg/32/32401_2.png) [@CBVG](https://community.thunkable.com/u/CBVG)\
**Post date:** [June 20, 2019, 10:04pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/8 "2019-06-20T22:04:39Z")

</div>

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 nominal height would be clipped from view, leaving room for the keypad.  
You need to capture the end of keypad entry to restore the arrangement height however, once the keypad is dismissed.  
Alternatively, you can have a sub component that is just the same height as the keypad, and make that component invisible while the keypad is present–that is the solution I personally use in my apps.

---

<div class="post-metadata">

**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\
**Post date:** [June 21, 2019, 9:35am UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/9 "2019-06-21T09:35:15Z")

</div>

If I well understood your problem youhave to do 2 things:  
First: set the Total label container to ‘fit contents’, so it should not cut the text.  
Second: I think it will solve your problem to set, in the advanced tab, ‘responsive’, I can’t really remember where that is, try the different options

---

<div class="post-metadata">

**Author:** ![erick.santos0106.eo1](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/erick.santos0106.eo1/32/48820_2.png) [@erick.santos0106.eo1](https://community.thunkable.com/u/erick.santos0106.eo1)\
**Post date:** [October 28, 2019, 12:27am UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/11 "2019-10-28T00:27:30Z")

</div>

If I am not wrong the ‘responsive’ is only available on Thunkable Classic, we’re wanting it to Thunkable X

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:08pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/12 "2024-11-08T12:08:33Z")

</div>



---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [December 19, 2024, 5:02pm UTC](https://community.thunkable.com/t/keyboard-deforming-the-design/113218/13 "2024-12-19T17:02:31Z")

</div>


