DatePicker does not detect orientation when container = body

[squinn]

Thanks again for this great project! We're starting to experiment with GMD a bit for a couple of potential projects, and are really enjoying the breadth and maturity of the GMD components.

I wanted to pass along a small issue that we noticed: the MaterialDatePicker component doesn't appear to correctly adjust it's orientation on a mobile device when the "container" option is set to "BODY".

E.g. this works fine:

<m:MaterialDatePicker placeholder="Pick Date:" fieldType="FILLED" container="SELF" detectOrientation="true"/>

But setting up a date picker like the following seems to then be stuck in portrait orientation:

<m:MaterialDatePicker placeholder="Pick Date:" fieldType="FILLED" container="BODY" detectOrientation="true"/>

[squinn]

For those that need it, here's a hack that can be used as a sort-of work around for this issue in the meantime:

public static void fixMaterialDatePickerOrientationDetection(MaterialDatePicker datePicker) {
    if(datePicker.getContainer() != DatePickerContainer.BODY) {
        return;
    }
    gwt.material.design.client.js.Window.addResizeHandler(resizeEvent -> {
        if (gwt.material.design.client.js.Window.matchMedia("(orientation: portrait)")) {
            datePicker.setOrientation(Orientation.PORTRAIT);
            $(".picker").removeClass("landscape");
        } else {
            datePicker.setOrientation(Orientation.LANDSCAPE);
            $(".picker").removeClass("portrait");
        }
    });
}

[kevzlou7979]

Oh it might be the position: fixed was added to the date picker.

[kevzlou7979]

Will try to check if theres a solid solution for this.