# How do I underline text in the new UI?

**URL:** <https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711>\
**Category:** Questions about Thunkable X\
**Tags:** draganddrop\
**Created:** [December 17, 2020, 3:15am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711 "2020-12-17T03:15:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 17, 2020, 3:15am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/1 "2020-12-17T03:15:18Z")

</div>

How do I underline text? I want to use a label and underline the texts but I cant seem to figure it out.

One other thing I would like to see is the ability to allow fluid sizing. For example, having a user add an item to a list and then the list items populate buttons which would auto size based on the text within them.

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 17, 2020, 8:44am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/2 "2020-12-17T08:44:56Z")

</div>

Maybe it wasn’t now that I think back. I apologize. I was thinking back to classic when we could use html code to do so. However, with the current UI I could use a row or column set to a height of 1 and whatever length, set the background to black and it would essentially make an underline for text. The issue is with the new UI, I haven’t found a way to do this as columns and rows are no longer used.

After using the new UI for a few hours now (so far its nice) I noticed something that is quite aggravating for me. When adding buttons or other components, I’ve found it quite hard to get things to line up right symmetrically (really hurts my OCD). If possible, could we the design page to work like the blocks page, in that we can either set things up via grid view or free mode? It would really help to get even spacing that eliminates the tedious work of lining every UI component up.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [December 17, 2020, 9:17am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/3 "2020-12-17T09:17:03Z")

</div>

@samclever Even I wanted to underline text for quite a long time, until I figured out a way to do so:  
Go to the advanced properties of your label, and go to styling. Set the bottom border width to 1 or 2.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/2/62cf71560c03d64e6e3607bc790af6671dd3da82.png)  
Now scroll down to this section  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/8/188d61d58534ed07d1b46e1c11b95d380fdd0158.png)  
and select black or whatever underline color you want. While not great, it serves the purpose. But even I would like to be able to make a certain word/piece of text inside a label bold or italic. Currently, you have to create a new label to set even a small word to bold or italic.

---

<div class="post-metadata">

**Author:** ![Michael\_Rogulla](https://avatars.discourse-cdn.com/v4/letter/m/ba8739/32.png) [@Michael\_Rogulla](https://community.thunkable.com/u/Michael_Rogulla)\
**Post date:** [December 17, 2020, 9:26am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/4 "2020-12-17T09:26:25Z")

</div>

Hi @codeswept,

try unicode. There are not only chars for different languages, but also different styles like bold, italic … and you can mix them with every text in your app, like 𝐇𝐞𝐥𝐥𝐨 𝑡𝑒𝑥𝑡 𝙨𝙩𝙧𝙞𝙣𝙜 … o͟h͟ ͟a͟n͟d͟ ͟o͟f͟ ͟c͟o͟u͟r͟s͟e͟ ͟u͟n͟d͟e͟r͟l͟i͟n͟e͟d͟ ͟t͟e͟x͟t͟.͟

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 18, 2020, 6:06am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/5 "2020-12-18T06:06:08Z")

</div>

I did that with some of my stuff but now it dosnt seem doable.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [December 18, 2020, 6:09am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/6 "2020-12-18T06:09:37Z")

</div>

I haven’t tried that with the D&DUI yet

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [December 21, 2020, 9:42pm UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/7 "2020-12-21T21:42:55Z")

</div>

> [@Michael\_Rogulla](#):
>
> try unicode.

@samclever - did @Michael_Rogulla’s suggestion work for you?

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 22, 2020, 11:34pm UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/8 "2020-12-22T23:34:45Z")

</div>

I dont know what unicode is. I will have to do some research.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [December 23, 2020, 1:50am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/9 "2020-12-23T01:50:15Z")

</div>

[http://textconverter.net/](http://textconverter.net/)

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 23, 2020, 1:59am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/10 "2020-12-23T01:59:13Z")

</div>

So I have to use a 3rd party site to do something on Thunkable? Thats annoying.

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [December 23, 2020, 3:33am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/11 "2020-12-23T03:33:23Z")

</div>

also use html codes  
else u can make 2 labels and then after in one type text and in other make underlines and place it.  
my brain 💯

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 23, 2020, 3:48am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/12 "2020-12-23T03:48:51Z")

</div>

can you show me an example?

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [December 23, 2020, 5:36am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/15 "2020-12-23T05:36:39Z")

</div>

wait 2 mins

sorry for delay try

> **[Thunkable](https://x.thunkable.com/projects/5fe2c0df0d0fc10012c470c0/1000908a-1401-468e-ab31-5ae65b9d048e/designer)**

With html u can do  
html:  
` <html><p>This is some example text. This is a <a href="#" >normal link</a>, and this is a <a href="#" class="underline">flashy link</a> using pseudo styles.</p></html>`

css:  
.underline {  
text-decoration: none;  
position: relative;  
}

```
.underline:after {
    position: absolute;
    content: '';
    height: 2px;
	  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
    bottom: -4px; 

   / ****** 
   optional values below 
   ****** /
    
    /* center - (optional) use with adjusting width */
    margin: 0 auto;
	  left: 0;
    right: 0;
	  width: 50%;
	  background: green;
	  
	  /* optional animation */
	  -o-transition:.5s;
	  -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}
 

 /* optional hover classes used with anmiation */
  .underline:hover:after {
	  width: 80%;
	  background: orange;
}

```

basicly its hovering text in flashy links and also normal… try in a html code editor

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [December 23, 2020, 8:24am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/16 "2020-12-23T08:24:50Z")

</div>

I apricate you showing me that. Unfortunately I’m more confused now than before. It would be nice if Thunkable could make the texts HTML compatible like they did with classic but then again I dont know how hard that would be on the back end. I suppose I will just use the old UI since the new one isnt very user friendly for those of us still learning.

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [January 1, 2021, 7:21pm UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/18 "2021-01-01T19:21:05Z")

</div>

welll i also created a topic

u can add the code as a script and try

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [January 4, 2021, 12:02pm UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/19 "2021-01-04T12:02:31Z")

</div>

> [@samclever](#):
>
> the new one isnt very user friendly for those of us still learning.

Hey @samclever - can you elaborate a bit here?

We’re keen to make the new UI as user-friendly as possible. What aspects specifically are you struggling with?

Thanks!

---

<div class="post-metadata">

**Author:** ![samclever](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@samclever](https://community.thunkable.com/u/samclever)\
**Post date:** [April 17, 2021, 5:18am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/20 "2021-04-17T05:18:31Z")

</div>

Sorry for the late reply, I have been MIA. I found the new UI to be a pain with regards to spacing my components. I used to use rows or columns that I could evenly space things like buttons and labels. Also using rows and columns meant I could hid entire sections and keep a lot on one screen (like login, new user and password recovery). I found it very difficult to make that happen with the new UI.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 17, 2021, 6:01am UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/21 "2021-04-17T06:01:54Z")

</div>

> [@samclever](#):
>
> Sorry for the late reply, I have been MIA

No worries @samclever - great to see you again!

> [@samclever](#):
>
> I used to use rows or columns … I found it very difficult to make that happen with the new UI.

Have you tried using the [group](https://docs.thunkable.com/v/drag-and-drop/groups) component yet?

> [@samclever](#):
>
> using rows and columns meant I could hid entire sections

You can still toggle the visibility of a group …

> [@samclever](#):
>
> I could evenly space things like buttons and labels

…aaaand, in the new UI you can set the exact X and Y location of a component so you actually have _more_ control over your layout that was previously available.

Hope that helps!

---

<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:19pm UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/22 "2024-11-08T12:19:28Z")

</div>



---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [December 19, 2024, 5:00pm UTC](https://community.thunkable.com/t/how-do-i-underline-text-in-the-new-ui/1040711/23 "2024-12-19T17:00:58Z")

</div>