This blog talks about how to adjust the height of a Text Area automatically using JavaScript. We know that a text area can hold a multi-line text input and you can use it in a form to collect user inputs such as comments or reviews. The text area can carry an infinite number of characters, and you can render text in a fixed-width. The attributes columns and rows define the size of a text area.
Assume that there is a requirement to adjust the height of a Text Area field automatically for avoiding scrolling up and down while entering the text. The entire text needs to be displayed without scrolling.
There is an inbuilt property called auto height in the Text Area properties available in Application Express 20 and lower versions, which specify the height of the text area will adjust based on the amount of text displayed. Height will be auto-adjusted only during the display i.e. it won’t help to auto increase/decrease height during entering the text to the field. Let us see how to auto increase/decrease height during entering the text.
Technologies and Tools Used
You have to use the following technologies to achieve dynamic height adjustment for the text area field.
- Java Script
- Oracle Apex
Steps to follow
We have to follow the below steps to achieve dynamic height adjusting for the text area.
Step 1:
Create a region in the name Text Area and select region type as Static Content.
Step 2:
Create a Text Area (Page Item) and name it as Text Area.
Step 3:
Now on the same page, navigate to the “Function and Global Variable Declaration” under JavaScript in the page properties and add the code given below.
function auto_adjust_height(element) {
element.style.height = (element.scrollHeight)+”px”;
}
Step 4:
Add the code given below in the “Custom Attributes” section available in the page item property.
oninput=” auto_adjust_height (this)”
Result
We have completed all the steps and now we can enter some texts in that field. The height will get adjusted while entering the text.
