Page 1 of 1
Auto adjust Text Area height based on content on load
Posted: 2022-08-03 11:10
by zibrahim
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.
Re: Auto adjust Text Area height based on content on load
Posted: 2022-08-04 01:36
by peebee
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.
Re: Auto adjust Text Area height based on content on load
Posted: 2022-08-04 06:06
by zibrahim
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?
Re: Auto adjust Text Area height based on content on load
Posted: 2022-08-04 07:23
by peebee
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
Re: Auto adjust Text Area height based on content on load
Posted: 2022-08-04 11:11
by zibrahim
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.