How to make primefaces inputTextArea fit to text?

Question

i'm trying to make <p:inputTextArea/> looks better, now when page is loaded i can see:

and when i click that TextArea :

here is the code:
<p:inputTextarea rows="6" value="#{bean.object.value}"style="width: 100%;" />

How can i make that area would adjust its size to text ? rows="6" is working for a little data but it looks terrible when more chars are written

Answer 1

I'd solve my problem with this plugin flexibleArea.js, but if you download it it won't fix the first time you focus on the textArea, so I had to tweak it a bit.

I have added to the bind a new event which is focus.

$textarea.bind('keyup change cut paste focus'

Now to get this working, download my tweak flexibleArea.js, include it in your xhtml, then in the document ready.

$(function() {         
   $('.ui-inputtextarea').flexible();    
});

And Here's a live demo on Primefaces TextArea flexible, and on github.

Hope this Helps.

Answer 2

Self explanatory code:

<p:inputTextarea
    rows="#{myBean.numberOfLines(myBean.myClass.theString, 70)}"
    cols="70"
    value="#{myBean.myClass.theString}"
    autoResize="true" />

public int numberOfLines(String string, int cols) {
        int rvalue = 0;
        for (String strTmp : string.split("\n")) {
            rvalue ++;
            rvalue += strTmp.length() >= cols ? strTmp.length() / cols : 0;
        }
        return rvalue;
    }

Edit: This will not work for every case, because of the size of the text, but for me, it's enough.