# Layout issue with rows

**URL:** https://community.thunkable.com/t/layout-issue-with-rows/48966
**Category:** Questions about Thunkable X
**Created:** [September 26, 2018, 6:24pm UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966 "2018-09-26T18:24:34Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Dennis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dennis/32/30148_2.png) [@Dennis](https://community.thunkable.com/u/Dennis)
#### Post date: [September 26, 2018, 6:24pm UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/1 "2018-09-26T18:24:34Z")

</div>

Hey guys!

Since the update for Thunkable X I struggle with the navigation bar of my app. I have kind of a navigation bar at the bottom (a row with 7% height) and in this row I have multiple buttons (with 100% height) spererated with other rows in between. My real problem now is that the buttons in the row are very small even though they are on 100% height (See on the screenshot) and should fill the whole height of the row.

I made a small example to demonstrate this problem:  
[https://x.thunkable.com/copy/e87a6987b0c20b54f29263fd74958b74](https://x.thunkable.com/copy/e87a6987b0c20b54f29263fd74958b74)

Any one else facing this issue? I am very grateful for any help 🙂  
Thanks

 ![Screenshot_20180926-202137](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/3/93fc5bd2fcb8d7b0fefc65e3a7c0d0f57fc51300.jpg)

---

<div class="post-metadata">

### Author: ![Kyle\_Williams](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@Kyle\_Williams](https://community.thunkable.com/u/Kyle_Williams)
#### Post date: [September 27, 2018, 5:28pm UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/2 "2018-09-27T17:28:51Z")

</div>

[https://x.thunkable.com/copy/2ab73f53271f119e631756dd18169d5f](https://x.thunkable.com/copy/2ab73f53271f119e631756dd18169d5f)

Try this one—buttons can be difficult to size when they only contain a background image and no text content. It ends up requiring an absolute width in my experiences.

Also, instead of using blank rows to create spacing, you should try using the space-between (or space-around or space-evenly) flex controls. My example includes a row that has this property turned on. To create more space between icons, set it’s width to a higher percentage, and to make less space between your buttons, set the width lower.

Hope this helps!

---

<div class="post-metadata">

### Author: ![Dennis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dennis/32/30148_2.png) [@Dennis](https://community.thunkable.com/u/Dennis)
#### Post date: [September 27, 2018, 7:39pm UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/3 "2018-09-27T19:39:42Z")

</div>

Thanks man that helped a lot for spacing properly in future 🙂 But I still have this issues.

I did some research and I figured out that this problem occurs in the following example:  
-In a new screen I add a row with this space-between setting and 3 buttons in this row. Up to here everything looks fine (Left picture in the screenshot)  
-I leave thunkable and go in again  
-I change something i.e. I add another row above

Now the buttons in the row are somehow very small (Right picture in the screenshot)

Can anyone try this and confirm the same issue? I honestly don’t have any reason for this behaviour.

 ![row%20issue](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/0/00ac6a4983be70264728d87831be7c74e4bc6531.png)

---

<div class="post-metadata">

### Author: ![Mark](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mark/32/18133_2.png) [@Mark](https://community.thunkable.com/u/Mark)
#### Post date: [September 28, 2018, 12:12am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/4 "2018-09-28T00:12:41Z")

</div>

Dennis,

Are you seeing this issue on Android or iOS? Also, could you please post another project share link for this latest issue?

Thanks in advance.

-Mark

---

<div class="post-metadata">

### Author: ![Dennis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dennis/32/30148_2.png) [@Dennis](https://community.thunkable.com/u/Dennis)
#### Post date: [September 28, 2018, 4:11pm UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/5 "2018-09-28T16:11:37Z")

</div>

I checked now with IOS and there everything looks fine there. I have this issue only on Android (Honor 9 with Android 8).

Here is a link: [https://x.thunkable.com/copy/7a0db8504d38a04004b79242f457aaf2](https://x.thunkable.com/copy/7a0db8504d38a04004b79242f457aaf2)

Thanks for your help  
Dennis

---

<div class="post-metadata">

### Author: ![Saku](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@Saku](https://community.thunkable.com/u/Saku)
#### Post date: [October 2, 2018, 7:57am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/6 "2018-10-02T07:57:31Z")

</div>

I fixed it for my android 8. Just remove the columns from your rows and put the buttons there as are.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/d/0d138480b8a5d02c643a0fbe90f66c15c675ee46.png)

Hope it helps,  
Saku

---

<div class="post-metadata">

### Author: ![Dennis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dennis/32/30148_2.png) [@Dennis](https://community.thunkable.com/u/Dennis)
#### Post date: [October 6, 2018, 11:42am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/7 "2018-10-06T11:42:32Z")

</div>

Thank’s for your help. Still doesn’t work on my honor 9 ☹

---

<div class="post-metadata">

### Author: ![AcrobatEpee](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/acrobatepee/32/26336_2.png) [@AcrobatEpee](https://community.thunkable.com/u/AcrobatEpee)
#### Post date: [October 6, 2018, 11:49am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/8 "2018-10-06T11:49:52Z")

</div>

Hey @Dennis. If your buttons are set to a relative size, please note that the relative size is set in comparison to it’s container size 🙂

Nice day 🙂

---

<div class="post-metadata">

### Author: ![Dennis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dennis/32/30148_2.png) [@Dennis](https://community.thunkable.com/u/Dennis)
#### Post date: [October 6, 2018, 11:55am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/9 "2018-10-06T11:55:10Z")

</div>

Yes I know. I have them on 100%. It is really strange because on IOS it is working as expected but not on my android.  
Nevertheless thank you for your help!

---

<div class="post-metadata">

### Author: ![AcrobatEpee](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/acrobatepee/32/26336_2.png) [@AcrobatEpee](https://community.thunkable.com/u/AcrobatEpee)
#### Post date: [October 6, 2018, 11:57am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/10 "2018-10-06T11:57:26Z")

</div>

Try setting height to fill container ?

---

<div class="post-metadata">

### Author: ![Dennis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dennis/32/30148_2.png) [@Dennis](https://community.thunkable.com/u/Dennis)
#### Post date: [October 6, 2018, 12:01pm UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/11 "2018-10-06T12:01:15Z")

</div>

still doesn’t work

---

<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, 11:55am UTC](https://community.thunkable.com/t/layout-issue-with-rows/48966/12 "2024-11-08T11:55:14Z")

</div>


