# Button Text Alignment (without affecting background image) **URL:** \ **Category:** Issues / Bugs\ **Tags:** design\ **Created:** [February 18, 2025, 1:46pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644 "2025-02-18T13:46:12Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![grant.mccallum](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/grant.mccallum/32/210541_2.png) [@grant.mccallum](https://community.thunkable.com/u/grant.mccallum)\ **Post date:** [February 18, 2025, 1:46pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/1 "2025-02-18T13:46:12Z")
This is my button. ![Button Alignment](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/2/821a79658b4ce0d66931ecb42ecd2df7cfafd658.png) 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! ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [February 18, 2025, 3:25pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/2 "2025-02-18T15:25:59Z")
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. ---
**Author:** ![grant.mccallum](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/grant.mccallum/32/210541_2.png) [@grant.mccallum](https://community.thunkable.com/u/grant.mccallum)\ **Post date:** [February 18, 2025, 3:51pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/3 "2025-02-18T15:51:26Z")
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: ![Button Alignment Fixed](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/c/5ca8d747492f218365c2cefa8e19fa864c47dc4e.jpeg) ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [February 18, 2025, 4:26pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/5 "2025-02-18T16:26:22Z")
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. ---
**Author:** ![grant.mccallum](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/grant.mccallum/32/210541_2.png) [@grant.mccallum](https://community.thunkable.com/u/grant.mccallum)\ **Post date:** [February 18, 2025, 4:31pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/6 "2025-02-18T16:31:47Z")
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. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [February 18, 2025, 4:41pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/7 "2025-02-18T16:41:04Z")
Here’s a demo that creates the look you’re going for: [Thunkable](https://x.thunkable.com/copy/2aeedd30f6b84cd903bdeeb0b9f0dbd9) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/2/023f0ad5a9ff88c2988872d79a4c41b42a9cd11d.png) 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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/f/5f714bbdcbb0340ce778c7bf39b06da7c2bc01b3.png) You can select a Group but… it looks like group components don’t exist anymore. I [complained about this](https://community.thunkable.com/t/is-there-a-way-to-detect-a-click-in-a-cloned-group-or-container-using-layouts-beta/2105387) and submitted a [feature request](https://github.com/thunkable/thunkable-issues/issues/1180) 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. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [February 18, 2025, 4:46pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/8 "2025-02-18T16:46:47Z")
By the way, you _can_ detect a click in Drag-and-Drop using a group: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/49edce7bcdcf29395d1a70ac60bf04aee10184f2.png) ---
**Author:** ![grant.mccallum](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/grant.mccallum/32/210541_2.png) [@grant.mccallum](https://community.thunkable.com/u/grant.mccallum)\ **Post date:** [February 18, 2025, 4:57pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/9 "2025-02-18T16:57:50Z")
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… ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [February 18, 2025, 6:38pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/10 "2025-02-18T18:38:14Z")
I would use a custom DVL layout for that. Or block cloning. Either one is more efficient than setting it up 16 times. ---
**Author:** ![grant.mccallum](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/grant.mccallum/32/210541_2.png) [@grant.mccallum](https://community.thunkable.com/u/grant.mccallum)\ **Post date:** [February 18, 2025, 6:53pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/11 "2025-02-18T18:53:12Z")
Appreciate your help as ever, Tatiang! I have found a highly cheesy solution… a few leading spaces on the button text. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [February 18, 2025, 7:20pm UTC](https://community.thunkable.com/t/button-text-alignment-without-affecting-background-image/3584644/12 "2025-02-18T19:20:19Z")
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: ![Untitled Video February 18, 2025 11_09 AM (3)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/f/8fd191c6db25972aad6ae728367de23c6e5faf8c.gif)