Hello Louie

If you are refering to the TEXT that is automatically created when you type in a container, it will try to fit the container and will just overflow it if the container is not wide enough. It is translated as normal text in the HTML file.

To make it "fit", you need to use CSS in the container, like, "overflow-wrap: break-word".

This will break on a word that do not fit the parent size. It does not change the width of it, but will try to change its height (unless you have a fixed height, etc).

Cheers,
Eduardo

Hi Jauch,

Unfortunately, that did not work when I applied the CSS to the text area widget. I also tried applying the CSS to a container containing the text area widget but also to no avail. Perhaps you could attach an example for me? Thanks.

Regards,

Louie

Louie,

Are you referring to this? In mobile?

If it is, you can try this:

https://www.outsystems.com/forge/component/2133/text-area-auto-resizer/

Other than that, you will need to use JavaScript, as I think (but I'm not sure) the auto size is not out of the box...

Hi Jauch,

I have attempted to use the plugin before. However, it seems that the plugin is for web applications only. Would you perhaps know how to do it using Javascript?

Regards,

Louie

Hi Louie,

What exactly is the thing you're trying to achive here?
Does the textarea have to fit (width/height) to the surrounding page/element/div? Of does it have to 'grow' with inner content?

Regards,

Jasper 

Hi Jasper,

I would like the number of lines for a text area to automatically increase as users type.

Regards,

Louie

Hi Louie,

You can implement/use this Jquery plugin:
https://www.jacklmoore.com/autosize/

Or use a bit of js:

$('textarea').on('paste input', function () {
    if ($(this).outerHeight() > this.scrollHeight){
        $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))){
        $(this).height($(this).height() + 1)
    }
});

Regards,

Jasper

Hi Louie,

Just add this code in document ready.

$("textarea").height( $("textarea")[0].scrollHeight );

Louie Ng wrote:

Hi Sekar,

Unfortunately your code will not work because there's no event defined that retriggers the code and updates the textarea.

@Louie: Just use my sample code, it's tested and will bring you closer to your goal ;)

Regards,

Jasper

Hi Jasper,

Could you attach an example of a mobile app utilising the js code that you provided? Thanks.

Regards,

Louie

Yes, of course. See attachment ;)

Good luck!

Hi Jasper,

Sorry for the inconvenience but could you attach an example for a mobile application? The attached example provided is for a web application. Thanks.

Regards,

Louie

Hi Louie,

Here's a mobile examble targeting one single textfield of your needs.
Also there's a maximum height of 500px inside the js (Action1) which you can adjust to your needs ;)

Regards,

Jasper

That worked, thank you.

Hi Jasper Oudenaarden, your solution worked fine for me with reactive wab app.

Thanks
Tom