GWT resize textarea in IE Internet Explorer

夙愿已清 提交于 2020-01-06 06:12:26

问题


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;
}

回答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 your 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 a css style 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);


来源:https://stackoverflow.com/questions/54842360/gwt-resize-textarea-in-ie-internet-explorer

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!