Prevent expansion of label to accommodate text

[Mark_c]

Hi super helpful community!

In my app users can input text that is displayed in labels. If they enter "too much", the label will expand by adding a second or third line. I want to prevent that.

I want the label to stay unchanged even if the text is too long. Either of two options are acceptible to me:

• Text simply cuts off at the end if the end of the label is reached
• Text is srollable like in the textbox

Is there any way to achieve that?

In the screenshot, the label expanded to fit that overlong text. I don't want that.

My label height is set to "automatic", and I don't want to have it expand beyond where it is right now. I want to keep the height and width unchanged.

I suppose I could do that, if I knew exactly what the height of the "automatic" is, based on the font size of 20 that I have in there.

Thanks!
Mark

Text_input_label.aia (1.8 KB)
(Simple example app attached)

[Patryk_F]

The original label component does not have these properties, unless you experimentally set its height to the appropriate number of pixels. You can use the LabelPlus extension to specify the height, e.g. in number of rows.

[Anke]

[nishyanthkumar]

@Mark_c

Text is scrollable like that in the textbox

Putting the Label inside a HorizontalScrollingArrangement works for me.

[Patryk_F]

Yes, and set srollable:

[Patryk_F]

You can do it this way by specifying a fixed height in pixels. But phones have subtitle size settings, so the same text may have different sizes in different phones.

[Mark_c]

I have already marked this as solved, because the extension works for me in that it prevents the label from expanding.

As for the two options I mention in my initial post, this does it the first way, by cutting off the text (it does this at a space between words, if available, and otherwise just within a word).

As for the scrolling, it does not work for me, even when I put the lable in a horizontal scroll arrangement. It does scroll, but not like the textbox. It scrolls vertically.
Text_input_label.aia (54.5 KB)

[Patryk_F]

I updated the extension, added a new block. Use this:

You can use with or without scrolling to achieve both points detailed in the first post.

You can also use a text shortening block in the label:

This block adds 3 dots at the end of the shortened text.

[Mark_c]

Thanks for your help!

I actually discivered the text shortening block just after posting my last message here and found it perfect for my case. Three dots added at the end are quite clear for the user. As this info in my app is inputted by the user themselves, it is a hint to them to keep their text shorter.

The LabelPlus expansion is very useful indeed.

Have a great day