Window is misplaced after device rotation

[David]

Hello Everyone,

I'm using kendo.ui.Window in my project which is run on mobile,

the window widget default is opened as maximum, it's perfect when the device is vertical,

but when I rotate the device to horizontal, sometimes it work fine, but sometimes the window widget is not full fill the screen, it will display like this

https://drive.google.com/open?id=1Wgl81bXRdFSwtSU5lebVWdNSoiAZajPH

is it possible to solve this problem programmatically?

 

here is my code: 

var myWindow = $('#chart-dialog');
myWindow.kendoWindow({
    width: 450,
    title: "QC Trend Chart - Test No:",
    visible: false,
    closable: false,
    modal: false,
    content: '',
    actions: [
        "Close"
    ],
});

 

Thanks for your help !!

[Aleksandar]

Hi David,

Kendo does not provide a method to detect orientation change, however you could use the jQuery orientationcahnge event and maximize the Kendo window when it occurs:

$(window).on( "orientationchange", function(event) {
  $("#myKendoWindow").data("kendoWindow").maximize();
});

Give this suggestion a try and let me know if it works for your scenario.

Regards,
Aleksandar
Progress Telerik

[David]

Hi Aleksandar,

Thanks for your reply, I have tried this suggestion and it doesn't work.

It can detect the orientation change successfully, but the window is still goes wrong.

I also tried if the window close then reopen as maximize, but the window will reopen as wrong size like the snapshot which I posted above.

Regards,
David

[Aleksandar]

Hi David,

I tried to reproduce the reported behavior but to no avail. Can you please modify this dojo, so the behavior is isolated and send it back to me for further investigation? Providing detailed steps to reproduce the issue would also be helpful. This way I would be able to debug locally and investigate further what might be causing the issue reported.

Looking forward to hearing back from you.

Regards,
Aleksandar
Progress Telerik

[David]

Hi Aleksandar,

I made a simple sample and prepare some resource for investigation:

demo website: https://reportkendouidialog.azurewebsites.net/
demo video: https://drive.google.com/file/d/10pFjDgzlQEo82qrfczCh0UCaq_a26gjZ/view
demo source code: https://drive.google.com/file/d/1cg2YTOntzJSghr-CuQcswg6TWkwTBY0C/view?usp=sharing

In the video, we demonstrate how we got this problem,
you can do the same behavior which we did in the video for investigate (device is iPhone)
and we also attach the source code above,

Thanks for your help !

Regards,
David

[Aleksandar]

Hello David,

Thank you for the provided sample, video, and project. We will review and try to replicate the issue locally. Once we have further information on the matter, I will update you accordingly.

Regards,
Aleksandar
Progress Telerik

[Aleksandar]

Hello David,

I reviewed the examples and was able to reproduce the issue only when saving the web page to be used as PWA. The Kendo Window resizing depends on the document resize event and I checked on a PWA sample page that both events are triggered as expected. I found an issue reporting window sizes in PWA mode not being updated correctly, and it appears the issue is still unresolved. 

Based on the above, what I can suggest is inspecting the window size upon orientation change in PWA mode and checking if the issue discussed is causing to observed behavior.

Regards,
Aleksandar
Progress Telerik

[David]

Hi Aleksandar,

I've been tried using orientation change to detect device rotation, and it will cause the same issue,
finally I choose another solution(without using window widget) to accomplish this task,

Thanks for your help :)

Regards,
David