auto sizing text areas

Is the autosizing textarea feature meant to work (xforms:textarea appearance="xxforms:autosize") ?

The textarea gets resized if I enter carriage returns (or if the text populating the control has textareas), but if I don't, the text wraps but no resizing occurs. Also if I enter tons of carriage returns to make the text area huge eventually the resizing becomes slightly off and the text area becomes too small. This is the code concerned in xforms.js:

    var lineNumber = target.value.split("\n").length;
    if (lineNumber < 5) lineNumber = 5;
    target.style.height = 3 + lineNumber * 1.1 + "em";

I don't think the approach of splitting on a line feed is feasible, because they aren't always present. Also the default size of 5 seems a little large - if the text area is autosizing, why don't we default to something small if it's empty, to avoid wasting space?

Here's a simple function which will resize a textarea based on the scrollHeight & clientHeight, always assigning a minimum number of rows (I use 2, because this is the smallest you can make a textarea while still making it *look* like a textarea):

function updateTextAreaRows( object, minRows){
    var scrollHeight = object.scrollHeight;
    var clientHeight = object.clientHeight;
    var rowHeight = clientHeight / object.rows;
    var linesAdded = 0;
   
    if( scrollHeight > clientHeight ) {
        // Grow
        while(scrollHeight > clientHeight ){
            object.rows = object.rows + 1;
            clientHeight = object.clientHeight;
            linesAdded++;
           
        }
    } else if( scrollHeight < clientHeight ) {
        // Shrink
        while( object.rows > minRows && scrollHeight < clientHeight - rowHeight){
            object.rows = object.rows - 1;
            clientHeight = object.clientHeight;
            linesAdded--;
        }
    }
    return linesAdded;
}

This works fine in IE, however a quick test in Firefox shows that the shrinking does not work: scrollHeight is never less than clientHeight. Perhaps if this problem can be overcome this might be a better approach?

Finally, once it's all working the scrollbar can be hidden for autosizing textareas (since it will always be disabled) using:

/* Don't waste space displaying scrollbars for autosizing textareas */
.xforms-textarea-appearance-xxforms-autosize {
    overflow: hidden;
}

Which gives you a little more usable space in the textarea.

Adrian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

On 8/8/06, Adrian Baker <[hidden email]> wrote:
>  Is the autosizing textarea feature meant to work (xforms:textarea
> appearance="xxforms:autosize") ?

Yes, it is intended to work :).

>  The textarea gets resized if I enter carriage returns (or if the text
> populating the control has textareas), but if I don't, the text wraps but no
> resizing occurs.

Good point.

>  This works fine in IE, however a quick test in Firefox shows that the
> shrinking does not work: scrollHeight is never less than clientHeight.

Do you still think that this code is better that what we have now?

>  Finally, once it's all working the scrollbar can be hidden for autosizing
> textareas (since it will always be disabled) using:
>
>  /* Don't waste space displaying scrollbars for autosizing textareas */
>  .xforms-textarea-appearance-xxforms-autosize {
>      overflow: hidden;
>  }

Good point. I changed the CSS already.

Alex
--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Alessandro Vernet wrote:

On 8/8/06, Adrian Baker [hidden email] wrote:

 Is the autosizing textarea feature meant to work (xforms:textarea
appearance="xxforms:autosize") ?

Yes, it is intended to work :).

 The textarea gets resized if I enter carriage returns (or if the text
populating the control has textareas), but if I don't, the text wraps but no
resizing occurs.

Good point.

 This works fine in IE, however a quick test in Firefox shows that the
shrinking does not work: scrollHeight is never less than clientHeight.

Do you still think that this code is better that what we have now?

If you've already committed the hiding of the scrollbar then yes - because the worst that happens is in firefox the textarea ends up too big if you enter a whole bunch of data then delete it again. As it is you can end up with the textarea too small very easily, and without scrollbars you can't get to the overflowing text easily.

 Finally, once it's all working the scrollbar can be hidden for autosizing
textareas (since it will always be disabled) using:

 /* Don't waste space displaying scrollbars for autosizing textareas */
 .xforms-textarea-appearance-xxforms-autosize {
     overflow: hidden;
 }

Good point. I changed the CSS already.

Alex

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: [hidden email]
For general help: [hidden email]
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
  

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

On 8/9/06, Adrian Baker <[hidden email]> wrote:
>  If you've already committed the hiding of the scrollbar then yes - because
> the worst that happens is in firefox the textarea ends up too big if you
> enter a whole bunch of data then delete it again. As it is you can end up
> with the textarea too small very easily, and without scrollbars you can't
> get to the overflowing text easily.

Adrian,

Sounds good. The code is committed using your method for resizing the
text-area. You can find your code in
ORBEON.xforms.Controls.autosizeTextarea, which is called from a few
places. Thank you for this code; even if the text-area does not shrink
on Firefox, I believe that this is really better than what we had
before.

Alex
--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws