Re: GWT sizing issue in iOS 7 Safari (with all apps using DockLayoutPanel?)

It appears that this is a bug in iOS 7 Safari for iPad (only iPad, in contrast to the post subject) that's well described here:

http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue

and here:

http://stackoverflow.com/questions/18855642/ios-7-css-html-height-100-692px

My fix in GWT is to fix the height at startup and on orientation changes, so I just used my existing orientation change detection stuff (copied here for completeness, but the actual fix code is pretty small):

public final class IpadIos7HeightFix implements IOrientationChangeHandler {

    public static void fixHeight() {

RootLayoutPanel.get().setHeight(getWindowInnerHeight() + "px");

Window.scrollTo(0, 0);

    }

    public static native int getWindowInnerHeight() /*-{

return $wnd.innerHeight;

    }-*/;

    @Override

    public void onOrientationChange(final OrientationChangeEvent event) {

fixHeight();

    }

}

public interface IOrientationChangeHandler extends EventHandler {

    void onOrientationChange(OrientationChangeEvent event);

}

public final class OrientationChangeEvent extends GwtEvent<IOrientationChangeHandler> {

    public static Type<IOrientationChangeHandler> TYPE = new Type<IOrientationChangeHandler>();

    private Orientation orientation;

    public OrientationChangeEvent(final Orientation orientation) {

this.orientation = orientation;

    }

    @Override

    public Type<IOrientationChangeHandler> getAssociatedType() {

return TYPE;

    }

    public Orientation getOrientation() {

return orientation;

    }

    @Override

    protected void dispatch(final IOrientationChangeHandler handler) {

handler.onOrientationChange(this);

    }

}

public final class OrientationResizeHandler implements ResizeHandler {

    private static final OrientationChangeEvent LANDSCAPE_EVENT = new OrientationChangeEvent(

   Orientation.LANDSCAPE);

    private static final OrientationChangeEvent PORTRAIT_EVENT = new OrientationChangeEvent(

   Orientation.PORTRAIT);

    private Orientation orientation;

    @Override

    public void onResize(final ResizeEvent event) {

final Orientation o = event.getWidth() > event.getHeight() ? Orientation.LANDSCAPE

: Orientation.PORTRAIT;

if (orientation != o) {

   Lib.getEventBus().fireEvent(

   o == Orientation.PORTRAIT ? PORTRAIT_EVENT : LANDSCAPE_EVENT);

   orientation = o;

}

    }

}

public enum Orientation {

    LANDSCAPE,

    PORTRAIT;

}

And finally, on startup:

final String userAgent = Navigator.getUserAgent();

if (userAgent.contains("iPad") && userAgent.contains("OS 7")) {

IpadIos7HeightFix.fixHeight();

eventBus.addHandler(OrientationChangeEvent.TYPE, new IpadIos7HeightFix());

}

Window.addResizeHandler(new OrientationResizeHandler());

Thanks for the tips...

On Tuesday, February 4, 2014 8:52:40 PM UTC+1, Phineas Gage wrote:

It seems that with all GWT apps using DockLayoutPanel on iOS 7 Safari, there is a vertical size issue where some content can get cut off. As an example, take an iPad and check out the GWT Mail sample:

http://gwt.googleusercontent.com/samples/Mail/Mail.html

or even the tab bar in the MGWT showcase:

http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCheckBox

In both cases, some pixels from the bottom or top of the page can get cut off. Changing device orientation can make it better, or worse.

Does anyone know of a fix for this?

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.