Auto adjust Text Area height based on content on load

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

Auto adjust Text Area height based on content on load

Post by zibrahim » 2022-08-03 11:10

Hi there,
Is there any tip or trick to automatically adjust the text area field height (not the rich HTML) upon loading the detail page?
Especially when you have a long or big content in it.

Thanks in advance.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Auto adjust Text Area height based on content on load

Post by peebee » 2022-08-04 01:36

While this plugin is ancient - it does still work as it should on current jquery. I've been using it for years.

https://github.com/brandonaaron/jquery-expandable

or here: https://plugins.jquery.com/expandable/

All <textarea> that would normally have scrollbars will auto-expand to end of text on page load or as you enter text. Does the job well.

Just call the script in hooks/header-extras.php

There are several other more current jquery plugins available that do pretty much the same thing but this one I find simplest as it covers ALL textareas without having to be specific with element id or class.

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

Re: Auto adjust Text Area height based on content on load

Post by zibrahim » 2022-08-04 06:06

Hi Peebee,
thanks for the tips but unfortunately it is not working as expected.
Do I need to modify anything in the jquery.expandable.js file?
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Auto adjust Text Area height based on content on load

Post by peebee » 2022-08-04 07:23

Try this;

Upload the jquery.expandable.js to your /hooks folder

Add this to hooks/header-extra.php

Code: Select all

<script src="hooks/jquery.expandable.js"></script>
Then add this to your tablename-dv.js (change the tablename to the table containing the textareas you want to expand).

Code: Select all

jQuery(function($) {
                $('textarea').expandable();
            });
That should be it, done

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

Re: Auto adjust Text Area height based on content on load

Post by zibrahim » 2022-08-04 11:11

Hi Peebee.
Now it is expanding only AFTER I click inside the text area. Not upon loading the page.
I have found the code that can make the text area expand the height upon loading.
Put the following code in the TABLE_NAME-dv.js file

Code: Select all

// autosize textarea height to fit the content on load
$j(function () {
    var a = document.getElementById('FIELDNAME');
    a.style.height = 'auto';
    a.style.height = a.scrollHeight + 'px';
});
Now, it is perfect!
Thanks Peebee.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

Post Reply