TextArea: auoResize not working for dynamic width

pelzrutsche · 07 May 2012, 21:28

Hi,

What steps will reproduce the problem?

create a p:textArea with autoResize=true (default)
set its width to 100% using CSS (make sure it's significantly wider than it would by by just specifying the cols-value)
start typing and see when it starts to resize

What is the PrimeFaces version?
3.3.SNAPSHOT (2012/05/07)

What is the expected output? What do you see instead?
I'd expect the text area to start resizing once the content comes close to the right corner at the bottom.
Instead, the area starts resizing way before that.

Which JSF implementation with version are you using?
Mojarra 2.1.6

Which component libraries are you using in addition to PrimeFaces?
PrimeFaces Extensions

Which application server or servlet container are you using?
vFabric 2.6.5 (Tomcat 7.0.27)

Example

Go to http://www.primefaces.org/showcase-labs ... xtarea.jsf
Set the width of the upper text area to 100% using Firebug (or a tool of your choice)
Start typing and the text area will start resizing way before the text reaches the bottom

Possible solution
From what I understand the text area widget's resize function is based on the number of columns. This calculation doesn't work once the text area is overruled by CSS. I find this solution quite elegant as it doesn't involve any calculations and even works with IE6-7.

What they suggest is basically this: wrap the text-area in a div and let the text-area expand to it. Whenever the text inside the text-area changes it's mirrored into the surrounding div which therefore expands automatically and with it the text-area.

smithh032772 · 07 May 2012, 23:58

1. please reply with your xhtml (and bean, if bean is responsible for dynamic width via CSS).
2. please see my code in/at forum topic URL below; i had to add autoResize="false', since autoResize 'was' working as designed and I did 'not' want it.

viewtopic.php?f=3&t=20750&p=65103#p65103

pelzrutsche · 08 May 2012, 01:07

smithh032772 wrote:1. please reply with your xhtml (and bean, if bean is responsible for dynamic width via CSS).

CSS

Code: Select all

.ui-expand { width: 100%; }

XHTML

Code: Select all

<h:panelGrid columns="2" styleClass="ui-expand">
  <h:outputLabel for="specBody" value="#{msg.EVALUATION_SPEC_BODY}" />
  <h:panelGroup>
    <p:inputTextarea id="specBody" value="#{specEditor.selection.body}" label="#{msg.EVALUATION_SPEC_BODY}" styleClass="ui-expand" />
    <p:message for="specBody" />
  </h:panelGroup>
</h:panelGrid>

smithh032772 wrote:2. please see my code in/at forum topic URL below; i had to add autoResize="false", since autoResize 'was' working as designed and I did 'not' want it.

If I set autoResize="false" the text-area does not resize automatically. All I get is the indicator in the lower right corner that allows me to resize the text-area manually (in width and height). However, I do want automatic resizing and it won't work with text-areas whose width is set through CSS and differs from the width defined by the cols property.

I created a patch for forms.js/forms.css that fixes this by using a reference container as suggested by the link I posted earlier.

smithh032772 · 08 May 2012, 01:11

Reply with your entire xhtml so we can review it all.

pelzrutsche · 08 May 2012, 01:19

Alright, here you go.

Have you tried following the steps I suggested in my initial post?

pelzrutsche wrote: Example

Go to http://www.primefaces.org/showcase-labs ... xtarea.jsf

Set the width of the upper text area width to 100% using Firebug (or a tool of your choice)

Start typing and the text area will start resizing way before the text reaches the bottom

It becomes even more obvious if you past a couple of paragraphs in that expanded text-area. It will resize much more than necessary since the algorithm still assumes the width equals 20 cols (the default value) and ignores that the text-area is actually much wider.

smithh032772 · 08 May 2012, 04:12

1. You don't have the following in your xhtml, and you need this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. You should always compare your code with showcase in trunk and other people's code in this forum.
3. You should always have the least amount of xhtml and bean that is very similar to showcase samples, get it working in your app, and then add CSS, accordingly. If your CSS breaks the component, then your CSS/xhtml is to blame for the component not working.

smithh032772 · 08 May 2012, 04:22

pelzrutsche wrote:Have you tried following the steps I suggested in my initial post?

pelzrutsche wrote: Example

Go to http://www.primefaces.org/showcase-labs ... xtarea.jsf

Set the width of the upper text area width to 100% using Firebug (or a tool of your choice)

Start typing and the text area will start resizing way before the text reaches the bottom

It becomes even more obvious if you past a couple of paragraphs in that expanded text-area. It will resize much more than necessary since the algorithm still assumes the width equals 20 cols (the default value) and ignores that the text-area is actually much wider.

I've seen this behavior (quoted above). You can go to Issue Tracker, create new issue for this behavior (that I am quoting above), reference this forum topic's URL in the new issue, and reply here with the new issue # and URL.

pelzrutsche · 08 May 2012, 10:44

Created a new issue (http://code.google.com/p/primefaces/iss ... il?id=4015)

smithh032772 wrote:1. You don't have the following in your xhtml, and you need this:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. You should always compare your code with showcase in trunk and other people's code in this forum.
3. You should always have the least amount of xhtml and bean that is very similar to showcase samples, get it working in your app, and then add CSS, accordingly. If your CSS breaks the component, then your CSS/xhtml is to blame for the component not working.

I'm sorry for that misunderstanding. I should have given a proper XHTML example right away, I add one for the issue tracker, however.

TextArea: auoResize not working for dynamic width

Who is online