How to make a TextArea auto-growing...?

[Carlo Alberto Degli Atti]

Hi,

I've looked around but I haven't found any solution, so I post it
here:

how can I make a TextArea that expands its height depending on the
text inside?

Thanks

CA

[David Goodenough]

Its good to find someone else who wants this. I first came across
fields like this with Lotus Notes, which has had these for years. They
are really useful, but very few other systems seem to have them and
to be honest it is one of the things that puts me off browsers - but that
is another story.

I wrote some code which did this while ago, but I do not know if
it still works on a current GWT, and I am absolutely sure it can be
done better.

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.TextArea;

public class ExpandingTextArea extends TextArea {
public void onBrowserEvent( Event event) {
super.onBrowserEvent( event);
if (getOffsetHeight( ) <= getScrollHeight( getElement( )))
setHeight( ( getScrollHeight( getElement( )) + 6)+"px");
}
private native int getScrollHeight( Element e) /*-{
return e.scrollHeight;
}-*/;
public void rightSize( ) {
Element el = getElement( );
int h = getScrollHeight( el);
setHeight( ( h + 6) + "px");
}
};

The fact that it has a magic number in it (6) is just plain wrong, and
I can not for the life of me remember why that number is there.

rightSize needs to be called when laying out a form, just to get started.
Again this can be done better. It is also possible that somewhere
along the line the need for getScrollHeight has gone, but I have not
been following the API closely enough to see.

To get the full Notes function, one would also need to set the width of
the area. This only sets the height. But that is for another day.

Hope someone can turn this into something that works properly.

David

[Carlo Alberto Degli Atti]

Hi David,

thank you for your answer! I will try it and I will give you my
feedback :-)

In my case the width is not a problem; my concern is about the height
(the number of displayed rows)...

best regards,

CA

On Feb 18, 1:11 pm, David Goodenough <david.goodeno...@btconnect.com>
wrote:

[Jeff Schwartz]

There's a jQuery plugin that I've used in the past with good results. I imagine that its code could be a model for a gwt derived textarea widget. Unfortunately I don't have the time to do this now but if I do in the future I'll take a crack at it. I don't think it would be that difficult.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Jeff Schwartz
http://jefftschwartz.appspot.com/
follow me on twitter: @jefftschwartz

[David Goodenough]

I have not tried it on a RichTextArea, but the principle should work
on those too.

David

[Carlo Alberto Degli Atti]

David it works (gwt2.2).

But how can I set the height at rendering time (before any browser
event)?


On Feb 18, 1:53 pm, David Goodenough <david.goodeno...@btconnect.com>

[Sean]

LinkedIn.com's Email does this, and I liked it a lot.

As for setting the size before a browser event, I would give it a minimum size in Pixels. Then just let it grow as needs be from there.

[Carlo Alberto Degli Atti]

I understand it, but if the text is arbitrarily long (number of rows)
how can I compute the initial size in pixels?

[David Goodenough]

When you create the panel and want to render it, use:-

DeferredCommand.addCommand( new Command( ) {
public void execute() {
textArea.rightSize( );
}
});

where textArea is the ExpandableTextArea.

[Carlo Alberto Degli Atti]

Thx (I'm still learning GWT...)

;-)

[David Goodenough]

Reading the jQuery plugin articles, this code may well not work on all
browsers. There appear to be some quirks with IE (what a surprise)
and Opera (don't know of that is version specific). I also do not know
(I do not have a copy to test it with) whether the IE problems have
gone away with IE9.

[Zak Linder]

Hey, I've taken a shot at this problem with pretty good results. Check out the code here: https://gist.github.com/833873

The textarea will stretch pretty reliably as the user types/cuts/pastes text. The way it does this is by maintaining an internal representation of characters-per-line. The only caveat is that you need a PX_PER_CHAR constant, so if the user changes font size or you use a variable-width font, it wont behave as expected.

As for calculating the initial size, with this widget you can call setText(getText()) (or add your own init() method that does the same).

Hope this helps!

[Andy]

We have a good implementation of both an auto-sizing TextArea
(vertical) and an auto-sizing TextBox (horizontal) that automatically
adjust to the CSS specified for the box (accommodating different
fonts, line-height, padding, etc).

I've been meaning to share it for a while and will do it this weekend.
It's currently dependent on GQuery.curCSS to get the computed styles.
I was hoping to remove that dependency before adding it to our gwt-
traction library but since we use GQuery in other places, it hasn't
been a priority for me. I'll try to remove that, but the first version
may require GQuery.

I should be able to have it up by Monday. Hopefully you can wait that
long. I'll update this thread when it's available.

Cheers,
Andy

On Feb 18, 6:38 am, Carlo Alberto Degli Atti <lordk...@gmail.com>
wrote:

[Brandon Donnelson]

Pixels can't be calculated in a input box, but can be calculated in a panel, at least from what I can do. I have put together some code to dynamically expand a textbox. The same could be applied to textarea, adding the height. I'll have the demo up tomorrow on my site, and I'll do textbox and textarea.

I have code in the sourc, but the google svn is down (unusual).

public class TextBoxExpandWidget extends Composite {

  private HTML h;

  private TextBox tb;

  public TextBoxExpandWidget() {

    

    VerticalPanel vp = new VerticalPanel();

    RootPanel.get().add(vp);

    

    tb = new TextBox();

    vp.add(tb);

    

    tb.addKeyUpHandler(new KeyUpHandler() {

      public void onKeyUp(KeyUpEvent event) {

        setSize();

      }

    });

    

    initWidget(tb);

    

    h = new HTML();

    AbsolutePanel ap = new AbsolutePanel();

    RootPanel.get().add(ap);

    ap.add(h, -100, -100);

  }

  private void setSize() {

    String s = tb.getText();

    s = s.replaceAll("\040", "&nbsp;");

    h.setHTML(s);

    

    System.out.println("s: " + s);

    

    int width = h.getOffsetWidth();

    if (width > 50) {

      tb.setWidth(width + "px");

    }

    System.out.println("width=" + width);

  }

}

Brandon Donnelson

http://gwt-examples.googlecode.com

http://c.gawkat.com

[zixzigma]

does it work with copy-and-paste scenarios ?

when a user pastes a long text, will the text-area auto-grow ?

paste using ctrl+v or mouse-right-click-context-menu

[Brandon Donnelson]

observe the events of changes in text area, and yes, it can change size on paste. You can accurately measure the text, by putting the text in a html div, and get the divs width and height. Of course, you'll have to have a width contraint on the div, b/c you'll want to wrap the text in the div. You'll have to compensate for some factors like css and things that could affect html. Done right you can correctly get the pixel width to resize the input box. Hope that helps.

Brandon Donnelson 

http://gwt-examples.googlecode.com

http://code.google.com/p/gwt-examples/source/browse/trunk/DemoTextBoxExpand/src/org/gonevertical/textboxexpand/client/TextBoxExpandWidget.java

[Andy]

I'm refactoring the code into gwt-traction right now, but noticing
that GQuery no longer has this static method:

public static String curCSS(Element elem, String name, boolean
force)

I should be close once I find its replacement.

[Brandon Donnelson]

I made a demo of textbox expanding and text area expansion.

http://demogwttextexpand.appspot.com/ - demo

http://code.google.com/p/gwt-examples/wiki/DemoGWTTextBoxExpander - wiki, links to source here.

Brandon Donnelson

http://gwt-examples.googlecode.com

http://c.gawkat.com

[Andy]

The AutoSizingTextArea widget is up at http://code.google.com/p/gwt-traction/

I hope you find it useful. I'm happy to accept patches if anyone wants
to suggest changes.

[Jeff Schwartz]

Doesn't work in FFv3.6.13 scoll bar is visible and text area does not expand

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Jeff Schwartz]

textarea also doesn't work in chrome v9.0.597.98

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Jeff Schwartz]

also doesn't work in ie v8

[Andy]

Jeff, I couldn't tell if you were replying to Brandon or me, but I did
notice an issue with my demo in Firefox 3.6. It was just the way that
demo was built and has been fixed.

http://code.google.com/p/gwt-traction/

Cheers,
Andy

On Feb 18, 6:11 pm, Jeff Schwartz <jefftschwa...@gmail.com> wrote:
> Doesn't work in FFv3.6.13 scoll bar is visible and text area does not expand
>
> On Fri, Feb 18, 2011 at 6:07 PM, Brandon Donnelson

> <branflake2...@gmail.com>wrote:

>
>
>
>
>
> > I made a demo of textbox expanding and text area expansion.
>
> >http://demogwttextexpand.appspot.com/- demo

> >http://code.google.com/p/gwt-examples/wiki/DemoGWTTextBoxExpander- wiki,

> > links to source here.
>
> > Brandon Donnelson
> >http://gwt-examples.googlecode.com
> >http://c.gawkat.com
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Web Toolkit" group.
> > To post to this group, send email to google-we...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-tool...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> --

> *Jeff Schwartz*http://jefftschwartz.appspot.com/

[Brandon Donnelson]

Nice link, they do it better I think than I did.

[Carlo Alberto Degli Atti]

Hey guys,

thank you very much for your contributions!

I've quickly given a look to gwt-traction from Andy, it seems really
interesting..

@Brandon I tried it with chrome, but the TextArea doesn't expand
vertically... (I'm reading now that @Jeff already noted it)


Thank u everybody!

CA

[Deepak Singh]

Hi,

I am having gwt-traction-1.2.jar, gwtquery latest jars.

final AutoSizingTextArea contactText = new AutoSizingTextArea(new TextAreaWithSelection(), 40, 600);

contactText.addStyleName("small");

The above code gives NoClassDefinitionFound for AutoSizingTextArea.

I make sure that i have correct jars added to the build path.

Thanks

Deepak

[Manuel Carrasco Moñino]

On Fri, Feb 18, 2011 at 8:15 PM, Andy <pul...@gmail.com> wrote:
> I'm refactoring the code into gwt-traction right now, but noticing
> that GQuery no longer has this static method:
>
>  public static String curCSS(Element elem, String name, boolean
> force)

Use $(elem).cur(name, force);

[Andy]

I just confirmed it's in there:

jar tvf gwt-traction-1.2.jar | grep AutoSizingTextArea.class
4333 Fri Feb 18 17:35:22 EST 2011 com/tractionsoftware/gwt/user/
client/ui/AutoSizingTextArea.class

Did you add this to your .gwt.xml?

<inherits name='com.tractionsoftware.gwt.user.AutoSizingTextArea'/>

Are you getting this error in DevMode or trying to compile?