Button Text Alignment (without affecting background image)

[grant.mccallum]

This is my button.

I don’t like it.

It contains text, a background color (green) and a background image (the coin with a transparent background). I would like to move the text alignment to the right hand side without affecting the contained image (so that the number appears on the right hand side of the background image)

I tried searching around and it seem the consensus is setting the flexDirection to row/column and alignItems to end will do the trick however all it seemed to do is reduce the size of the button width (currently set at 20% of container).

All advice appreciated!

[tatiang]

Use a Layout set to align horizontally with two Containers inside. In the left (first) container, put the image. In the right (second container), put the number text.

[grant.mccallum]

Hi Tatiang, thanks for the response - would you mind sending me a screenshot? I’m having a hard time tracking this feature down. I am using the classic version, not the drag and drop if that matters.

Just for clarity, (I’m not sure if my first post was that clear) the effect I am trying to creat is that the text appears within the button but aligned to the right hand side rather than next to the button like this:

[tatiang]

It’s been a long time since I’ve used the Snap-to-Place interface but you would create a row with two rows inside and populate each one as I described above for the containers.

[grant.mccallum]

I’m struggling a bit with this - my understanding of your answer is that I should place the image in the left container and the number label in the right, surely this would result in a number next to an image?

This is one button we are talking about, so one item with multiple properties, I can’t split these out across two containers.

[tatiang]

Here’s a demo that creates the look you’re going for: Thunkable

One of the frustrating limitations of Thunkable is that even though you should be able to detect a row or column click, you can’t because those components are not listed in the Any Component “click” event block:

You can select a Group but… it looks like group components don’t exist anymore.

I complained about this and submitted a feature request two and a half years ago but it hasn’t been improved.

So… what to do? I guess you could create a custom Data Viewer List (DVL) layout since those have “click” event blocks.

[tatiang]

By the way, you can detect a click in Drag-and-Drop using a group:

[grant.mccallum]

Oof. So there’s truly no way to align the text within a button? That fels like it should be a fairly simple feature.

Thanks for the workaround, I really don’t want to do it (there are 16 rows of these types of buttons in total, all with blocks governing whether a button is to be enabled or disabled) but if this is the only way then I guess I’ll need to bite the bullet…

[tatiang]

I would use a custom DVL layout for that. Or block cloning. Either one is more efficient than setting it up 16 times.

[grant.mccallum]

Appreciate your help as ever, Tatiang!

I have found a highly cheesy solution… a few leading spaces on the button text.

[tatiang]

Just for reference, here’s an app I’m working on that uses a Data Viewer List for multiple selectable buttons – oops, the second click got cropped out: