Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Dynamic Expanding Text Fields

Avatar

Level 9

Is it possible for text fields to expand vertically as the user is typing so they can see all of the text they have entered without pressing tab? I get this request a lot from my users. I have tried making the fields two text rows tall but they still keep asking.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi,

I know what you are trying to achieve, but I don't think that you will get it to work easily. You would have to work out the length of the string as the user is typing and change the height of the object. I just think that while this will change the height of the object, this wont be visible until the page is relayed out.

I have updated the example, showing a workaround: http://assure.ly/g80MVY.

Hope that helps,

Niall

View solution in original post

4 Replies

Avatar

Level 10

Hi,

If you have a look at this example: http://assure.ly/g80MVY. On the lat page we have a textfield and a button that changes the h property and the minH property.

In your case you could have script in the enter event that sets the height of the textfield to a large height:

this.h = "2in";

Then in the exit event revert to a minimum height (minH value would be the height of your textfield at design time - two rows high):

this.minH = 0.5in";

Hope that helps,

Niall

Avatar

Level 9

I'm sorry, I guess I left out some information. These are dynamic text fields that expand when you have added more than one line of text but they do not expand until you exit. The question is, can I have these expand as they type or what you described and then have them shrink back to accomodate all the text that was entered?

Avatar

Correct answer by
Level 10

Hi,

I know what you are trying to achieve, but I don't think that you will get it to work easily. You would have to work out the length of the string as the user is typing and change the height of the object. I just think that while this will change the height of the object, this wont be visible until the page is relayed out.

I have updated the example, showing a workaround: http://assure.ly/g80MVY.

Hope that helps,

Niall

Avatar

Level 9

Thanks Niall.

I really appreciate your help with this!

-Don