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.
Auto adjust Text Area height based on content on load
Auto adjust Text Area height based on content on load
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.
Re: Auto adjust Text Area height based on content on load
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.
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
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?
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.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.
Re: Auto adjust Text Area height based on content on load
Try this;
Upload the jquery.expandable.js to your /hooks folder
Add this to hooks/header-extra.php
Then add this to your tablename-dv.js (change the tablename to the table containing the textareas you want to expand).
That should be it, done
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>
Code: Select all
jQuery(function($) {
$('textarea').expandable();
});
Re: Auto adjust Text Area height based on content on load
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
Now, it is perfect!
Thanks 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';
});
Thanks Peebee.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.