Layout issue with rows

Thunkable Discuss
#1

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

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

Screenshot_20180926-202137
Screenshot_20180926-2021371080×1920 74.2 KB

#2

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!

#3

Thanks man that helped a lot for spacing properly in future :slight_smile: 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
row%20issue2180×1917 52.7 KB

#4

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

#5

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

Thanks for your help
Dennis

#6

I fixed it for my android 8. Just remove the columns from your rows and put the buttons there as are.
image

Hope it helps,
Saku

#7

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

#8

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 :slight_smile:

Nice day :slight_smile:

#9

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!

#10

Try setting height to fill container ?

#11

still doesn’t work