GWT resize textarea in IE Internet Explorer

Question

How can we make a textarea resizable in IE on a GWT project?

A textarea can be made resizable using CSS, but this doesn't work in IE:

.gwt-TextArea {
    resize: vertical;
}

Answer 1

I figured out a solution using the JQuery resizable() method. In order to use it in a GWT project, I used JSNI (Javascript Native Interface) to integrate Javascript code into the GWT project.

Steps

1. Set the element id of the widget that we want to resize in GWT.
2. Add your JQuery libraries to the GWT project's starter page (index.html or index.jsp).
3. Create the JSNI method. The method will call the JQuery resizable() method on the element id set in step 1.
4. Call your JSNI method in your code at some point after GWT.create() or uiBinder.createAndBindUi(this) method.

Example

Step 1. Set the element ID:

private final String TEXT_AREA_ID = HTMLPanel.createUniqueId();

textArea.getElement().setId(TEXT_AREA_ID);

Step 2. In your index.html/jsp page add this:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Step 3. Create your JSNI method:

public class JSNIResizer
{
   public static native void resize(String textAreaId) /*-{
      // Internet Explorer. IE 11 uses 'trident'.
      var isIE = ($wnd.navigator.userAgent.match(/msie/i) || $wnd.navigator.userAgent.match(/trident/i));

        // Only apply this to IE browsers
        if (isIE) {

            var textArea = $wnd.$("#" + textAreaId);

            if (textArea) {
                textArea.resizable({
                    handles : 'n, s' // handle vertical resizing only.
                });

                // Optional: Adds css styles from jquery-ui.css
                textArea.addClass("ui-widget-content");
            }
        }
   }-*/;
}   

Note that you can do this if you don't want to restrict it to vertical resizing only:

textArea.resizable();

Step 4. Call it with the id of the element to resize:

JSNIResizer.resize(TEXT_AREA_ID);