How to align text to vertical Center when the button Height is set to fill container

I have created a simple button with Height set to Fill Container and the text on button shifts to top . how to place the text at the center of the button

are you using drag and drop ui or old ui

old ui

Did this ever get figured out?

Edit: Looks like it automatically centers it on the Thunkable live editor. I’m betting it does in the live app as well but I haven’t checked yet.

1 Like

Was it ever a problem?
Have you tested it in the Thunkable Live App?

When viewing it on the computer screen it’s not centered

1 Like

Really?
What do you call this?


What do you call this?

Not sure why you had to say it the way you did, but I’ll oblige, I would call yours a bad attempt to reproduce the problem I am having

2 Likes

:blush: :blush:
The design screen does not show the actual text position but the Web Test or Live App will do.

1 Like

I know this is an old thread, but I am now having issues with buttons. Before I would just set the height and width of the button to fit contents and it worked well. However, this is now a pretty big issue that I can’t seem to overcome. No matter what I try, my button text is glued to the top and I have not found any way to get it to move to the center of the button: padding doesn’t work, margins do not work, nor does setting the max height of the button to try forcing a pseudo centered text on the button. A workaround that does work is labels, but the label is not a good option because only the text is active to the Click action. And, no, this isn’t just in the Thunkable Live app. It is replicated in both the TL app and live in TestFlight:

Thunkable Live app:

TestFlight app:

This makes my buttons look like garbage. Any ideas on how to get text to align in the middle of a button?

I am still using the StP interface since DnD still does not work across different device sizes.

I converted to DnD and, I have to say, I am quite impressed with the progress made. I tested on my Android tablet and it’s playing very nicely with resizing! :smiley: However, the buttons are still an issue. Here is a DnD screenshot from the Thunkable Live app:

1 Like

This has been a problem for a year and a half. Please add a comment to this bug report:

Hopefully, the more comments it gets, the more likely it is that Thunkable fixes it.

3 Likes

I did finally find a way to work around this issue. I created image files for my button text and then cleared the text out of the button. I used a 250px by 100px transparent PNG for the smaller buttons and a 350px by 100px transparent PNG for the wider buttons. It’s doing what I need it to do. For the buttons themselves, I just set them to relative percentages to make them the size on the screen I need them to do since fill contents won’t work if there is no text in the button. I set the images as background images and tell it to contain the background image.

It’s been driving me nuts now that all of the alignment that was working is no longer working, but I feel I can at least publish now and not have my app look unpolished.

2 Likes

Here is a before screenshot:

And an after screenshot:

when you replace the buttons with new buttons, do you see the same issue?

I dont have this issue in my most recent apps i dont believe

1 Like

I don’t know. I haven’t replaced any of my buttons. I can create a copy and try it out. I’m trying to publish today and I have a lot of buttons! Replacing buttons = a lot of blocks to update.

3 Likes

But buttons into a row container and set the buttons heigth to Relative Size 100%.
Then it should works.