Skip to Content (Press Enter)
2020-01-03 05-37-58
JEYASRI R
249Views
6Comments
Enabling scroll bar after the 5 lines expanded textarea
Question

Hi, 

I have used Textarea input field. I want to first 5 lines for expanded the input field then after I want to set the scroll that inputfleld.If any possible?



Thanks,

Jeyasri

0
0
15 Oct 2019
Copy Link
2023-07-28 17-00-32
Marco Arede
 
MVP

Hi JEYASRI R,

The input field will show a vertical bar when the content provided exceeds the visible area. 

In case you need an horizontal one, you need to add a class containing these properties:

  • white-space: nowrap:
  • overflow: auto;

Regards,

0
0
15 Oct 2019
Copy Link
2020-01-03 05-37-58
JEYASRI R

Marco Arede wrote:

Hi JEYASRI R,

The input field will show a vertical bar when the content provided exceeds the visible area. 

In case you need an horizontal one, you need to add a class containing these properties:

  • white-space: nowrap:
  • overflow: auto;

Regards,

Hi macro,

I am using javascript for expanded text area

var textarea = document.getElementById($parameters.In1);
var heightLimit = 500; /* Maximum height: 500px */

textarea.oninput = function() {
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};


I need When the user insert the input filed first 5 lines of expanded , When the user insert the 6th line I want to set the scroll in that input field.Like a whatsapp chat input field, If any possible



Thanks,

Jeyasri


0
0
15 Oct 2019
Copy Link
2023-07-28 17-00-32
Marco Arede
 
MVP

Hi JEYASRI R ,

Can you provide an illustration, to better understand this?

 I need When the user insert the input filed first 5 lines of expanded , When the user insert the 6th line I want to set the scroll in that input field.Like a whatsapp chat input field, If any possible

0
0
15 Oct 2019
Copy Link
2020-01-03 05-37-58
JEYASRI R

Marco Arede wrote:

Hi JEYASRI R ,

Can you provide an illustration, to better understand this?

 I need When the user insert the input filed first 5 lines of expanded , When the user insert the 6th line I want to set the scroll in that input field.Like a whatsapp chat input field, If any possible


Like this link :  https://stackoverflow.com/questions/4954252/css-textarea-that-expands-as-you-type-text

0
0
15 Oct 2019
Copy Link
2020-01-03 05-37-58
JEYASRI R

I have a Textarea where users can input text. if users insert a large amount of text, I want the text area to expand accordingly. So I am using the below javascript

var textarea = document.getElementById($parameters.In1);
var heightLimit = 500; /* Maximum height: 500px */

textarea.oninput = function() {
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};

Now I want to fix the height to expanded textarea, Then after enabling scroll in that input field



Thanks,

Jeyasri


0
0
15 Oct 2019
Copy Link
2023-07-28 17-00-32
Marco Arede
 
MVP

Hi JEYASRI R,

Now I got what you meant, and it seems the solution is described there. Means you only need to add to the input widget properties the following one:

  • contenteditable="true"

Good luck!

0
0
15 Oct 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.