How do I underline text in the new UI?

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.

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.

1 Like

@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
Now scroll down to this section
image
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.

4 Likes

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͟.͟

2 Likes

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

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

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

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

http://textconverter.net/

3 Likes

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

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 :100:

can you show me an example?

wait 2 mins

sorry for delay try

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

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.

2 Likes

welll i also created a topic

u can add the code as a script and try

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!

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.

No worries @samclever - great to see you again!

Have you tried using the group component yet?

You can still toggle the visibility of a group …

…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!

2 Likes