Window is misplaced after device rotation

8 posts, 0 answers
  1. David
    David avatar
    4 posts
    Member since:
    Mar 2020

    Posted 03 Apr 2020 Link to this post

    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 !!

  2. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 07 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. David
    David avatar
    4 posts
    Member since:
    Mar 2020

    Posted 07 Apr 2020 in reply to Aleksandar Link to this post

    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
  4. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 09 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. David
    David avatar
    4 posts
    Member since:
    Mar 2020

    Posted 28 Apr 2020 in reply to Aleksandar Link to this post

    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

  6. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 30 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 04 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  8. David
    David avatar
    4 posts
    Member since:
    Mar 2020

    Posted 08 May 2020 in reply to Aleksandar Link to this post

    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

Back to Top