How to fit a text to its labelbox

Hi everyone,

It’s Héctor and Thomas (@thomasbbak4jx) , who is learning how to create apps using Thunkable (in Colombia).

We try to find how to solve our problem, and we found some information related it, but we are not able to solve it. May anyone help us?

We want to fit automatically a text to its labelbox. So, we don’t want to size the text using the number of lines nor the text size. We think that it could be cooler for our “customers” that they could read all the information inside a labelbox, fit all of them automatically.

Example:
https://x.thunkable.com/projectPage/620bcaadf6d1a00011c16113

When we press the “help” button, we want to see the information to help the user, fitting this information to its labelbox.

1 Like

What are a few examples of text strings the customer would see?
Which label component(s) in your project are you referring to?
Can you show a sketch/screenshot of how it looks now and how you want it to look?

Labels can extend to fit text of any size. Have you tried changing the label’s font size dynamically? I’m not sure if you want the font size to adjust or the width.

1 Like

Hello, I think the label that needs the most adjusting is this one:

Thunkable - Google Chrome 2_22_2022 4_30_34 PM

As you can see the text is cut due to the size of the label, is there a way that we can make that text fit or adjust to the label size without making any permanent change? since the text in that label always displays a different amount of tags it would be really cool if we could make the label bigger or smaller depending on the amount of text in it.

Thanks for responding and helping us :smiley:

Do you want the label to get shorter/taller with less/more text or to be a standard size and allow for scrolling within it?

I would like the size of the label to change depending on how much text there is inside of it, if that’s not possible then just limiting the number of words that are put on the label would be cool too.

Amazing!

A ver si ese usuario nos ayuda!

Dile esto:
En realidad lp que nos gustaría es un elemento “reponsive”. Que se ajuste, automáticamente, al espacio. Tal cual lo hace un bloque, por ejemplo, en un slide de google, o un texto de una web dependiendo de si se ve en el teléfono, ordenador, o si escribo más texto en un cuadro de texto.

Eso se llama reponsive en web.

I used Google Translate:

Amazing!

Let’s see if that user helps us!

Tell him this:
Actually lp that we would like is a “responsive” element. That it adjusts, automatically, to the space. Just like a block does, for example, in a google slide, or a text on a website depending on whether it is seen on the phone, computer, or if I write more text in a text box.

That is called responsive in web.

I actually don’t know how to do this in the Drag & Drop interface. But in the older Snap to Place interface, you can set the height of the label to Fit Contents:

1 Like

I used Google Translate:

Sorry about it LOL, I was trying to answer the email with my student Thomas, and I didn’t see I could post here just answering through Google :rofl:

That’s the problem: how to do it in the Drag & Drop interface. However, thank you for your time!

I actually don’t know how to do this in the Drag & Drop interface. But in the older Snap to Place interface, you can set the height of the label to Fit Contents

1 Like

This feature is not available yet in the DnD interface.

Thank you :smiling_face_with_tear:

1 Like

Hey all. One workaround here is to use a text input, disabled, background and border color removed. This will imitate a scrollable label.

as of today, this is only working on iOS but soon will work on Android also. Not sure on the timeline but soon!

1 Like

Thank you so much. We are gonna try it, using an iOs device, and we will tell you if it works :slight_smile: