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