# Position button text to the left

**URL:** <https://community.thunkable.com/t/position-button-text-to-the-left/136521>\
**Category:** Questions about Thunkable X\
**Created:** [July 8, 2019, 10:06pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521 "2019-07-08T22:06:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [July 8, 2019, 10:06pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/1 "2019-07-08T22:06:50Z")

</div>

How can I position the text inside a button to the left, like a label would show.

Thanks

---

<div class="post-metadata">

**Author:** ![BlueWhaleYT](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bluewhaleyt/32/28437_2.png) [@BlueWhaleYT](https://community.thunkable.com/u/BlueWhaleYT)\
**Post date:** [July 9, 2019, 3:22am UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/2 "2019-07-09T03:22:24Z")

</div>

Hi there,  
My solution is. …  
Umm. …Add right-padding until no margin.

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 9, 2019, 7:45am UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/3 "2019-07-09T07:45:30Z")

</div>

Add a new button and set the flexDirection = row property for it.

 ![%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/4/64bd6069bf6dd62a0c0b6ee0b2725ad5148bc9c7.png)

---

<div class="post-metadata">

**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\
**Post date:** [July 9, 2019, 9:15am UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/4 "2019-07-09T09:15:58Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\
**Post date:** [July 9, 2019, 12:10pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/5 "2019-07-09T12:10:30Z")

</div>

I have an image in the background and I’m having issues moving the text in a corner because the align self has to be set to stretch for the image to apply to the whole button

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [July 9, 2019, 12:26pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/6 "2019-07-09T12:26:52Z")

</div>

I know I marked as solution but upon further testing, it doesn’t appear to work with multi line. Let me show you what I need it to look like. Ignore the messages I was sending in app 😛 Just look at the text alignment.

 ![Greet%20Chat%20App](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/0/6010cf252619f75b015cf62d77b240a03cb665d4.jpeg)

This is what the app looks like. As of now I am using labels. When extended list viewer comes out which I am fairly certain will have photos, then I will be switching to that of course, IF it supports multi line 🙄

Do you get me with what I need?

Many thanks

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 9, 2019, 12:29pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/7 "2019-07-09T12:29:49Z")

</div>

Sorry, but I did not understand. Do you want to look like on the buttons?

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [July 9, 2019, 12:32pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/8 "2019-07-09T12:32:47Z")

</div>

The app sends text messages of unlimited length. I am changing to buttons so I can implement a photo sending feature!

Text messages can be paragraphs upon paragraphs long. And I need to be able to position the text like you see above (the above photo uses labels, **not** buttons) so when a message goes to the second or 50th line if somebody needs that many, then I must support this and have the text messages align to the left.

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 9, 2019, 12:36pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/9 "2019-07-09T12:36:54Z")

</div>

I understood. A simple solution is a hamburger widget with a transparent button above the label.

---

<div class="post-metadata">

**Author:** ![kartik\_old](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik_old/32/28305_2.png) [@kartik\_old](https://community.thunkable.com/u/kartik_old)\
**Post date:** [July 9, 2019, 12:37pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/10 "2019-07-09T12:37:47Z")

</div>

> [@actech](#):
>
> hamburger widget

What do u mean?  
Can u explain more sir?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [July 9, 2019, 12:39pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/11 "2019-07-09T12:39:11Z")

</div>

Create a column, Label into it, and on top it will cover the transparent button with absolute positioning and 100% dimensions.

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [July 9, 2019, 12:39pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/12 "2019-07-09T12:39:11Z")

</div>

Ah yes. But a 2 layer hamburger as such? So must I put the label inside a column/row and then set the column to the correct size, and then label and button to fill container?

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [July 9, 2019, 12:39pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/13 "2019-07-09T12:39:52Z")

</div>

> [@actech](#):
>
> Create a column, Label into it, and on top it will cover the transparent button with absolute positioning and 100% dimensions.

Let me give this a try 🙂

Thank you very much

---

<div class="post-metadata">

**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\
**Post date:** [July 9, 2019, 3:00pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/15 "2019-07-09T15:00:58Z")

</div>

I just did it for my app and it works;

Label and button are in the colum, the label positioning is absolute and you can offset its edges to make it ‘stick’ where you want it to, the position will be absolute relative to the column and will overlay with the button, that you can leave untouched.

Beware though that if the button is raised it will always be in front of the label, other wise you can use ZIndex to decide which one stays on top of the other in case you willwant to use this for future apps or situations

---

<div class="post-metadata">

**Author:** ![BlueWhaleYT](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bluewhaleyt/32/28437_2.png) [@BlueWhaleYT](https://community.thunkable.com/u/BlueWhaleYT)\
**Post date:** [July 14, 2019, 12:26pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/16 "2019-07-14T12:26:37Z")

</div>

But if it is inside a column or row, not work.

---

<div class="post-metadata">

**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\
**Post date:** [July 14, 2019, 1:53pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/17 "2019-07-14T13:53:04Z")

</div>

you must position the button correctly so that it is on top of the label

---

<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, 12:12pm UTC](https://community.thunkable.com/t/position-button-text-to-the-left/136521/18 "2024-11-08T12:12:13Z")

</div>


