How to make a readonly fit to its content

Question

I have a textarea in my form :

<s:textarea key = "appInfo.collection" 
       required = "true" 
       readonly = "true"
       cssClass = "form-control" 
           rows = "8"/>

and few more textarea fields. I want to make these textareas fit their content in readonly mode.

Since I have specified rows=8 it sometimes shows a blank area if content fills only 2 rows, or shows a scrollbar if content is more than 8 rows.

How can I give these textareas the right size based on their content, with no scrollbars ?

Sorry but the example didn't work for me. My text areas are in read mode and I do not have keyup function available for them. — user3339592, Sep 29 '14 at 21:38

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

You can use the answer linked in my comment.

Regarding your comment

My text areas are in read mode and I do not have keyup function available for them

You don't need any keyup handler: since it is readonly, do it once, after the page has loaded:

<s:textarea id = "myTextarea"
           key = "appInfo.collection" 
      required = "true" 
      readonly = "true"
      cssClass = "form-control" 
          rows = "8"/>

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

$(function(){ 
    // call the function in document.ready 
    autoheight($("#myTextarea"));
});

edited May 23 '17 at 12:07

Community

1
1

answered Sep 30 '14 at 12:06

Andrea Ligios

49,480
26
114
243

Thanks , I had done it in same way only thing I forgot is calling it on document.ready() function. I was calling it in – user3339592 Sep 30 '14 at 13:50
1

You're welcome. I'm not sure about your other questions, but I remember I've seen on SO scripts like this with maxHeight handling (for adding scrollbars on big sized textareas), while for the min height it is probably related to some default value, and I'd try changing the *rows* attribute too – Andrea Ligios Sep 30 '14 at 13:55
1

I did change rows attribute already. It works great. Think just need to change the value 20 to something smaller to add little less space at the bottom. Thanks again works for me. – user3339592 Sep 30 '14 at 14:01

How to make a readonly fit to its content

1 Answers1