InAppBrowser breaks layout on orientation change

6 posts, 0 answers
  1. MoriartyX64
    MoriartyX64 avatar
    19 posts
    Member since:
    Jun 2013

    Posted 23 Apr 2014 Link to this post

    There seems to be a major issue with the InAppBrowser that doesn't respect the project's orientation fixes. See also CB-5649 InAppBrowser overrides App's orientation. This can be reproduced on an iOS7 device itself, but not in the AppBuilder simulator.

    Basically, if you have a portrait fixed orientation and use the InAppBrowser the latter will allow you to rotate, for example, 90 degrees clockwise. Upon closing the InAppBrowser, the Kendo View will be totally distorted (half screen rendered, toolstrip half way the screen etc.). 

    Now the issue seems to be resolved in the Cordova core, but perhaps there is a workaround for now? For example, is there someway to "redraw" the underlying screen on the close event of the InAppBrowser? Or perhaps other quickfixes?
  2. MoriartyX64
    MoriartyX64 avatar
    19 posts
    Member since:
    Jun 2013

    Posted 24 Apr 2014 in reply to MoriartyX64 Link to this post

    In the meantime, I've tried adding the following function to the page (globally, as well as in-page):

        function shouldRotateToOrientation (rotation) {
            
            switch (rotation) {
                //Portrait or PortraitUpsideDown
                case 0:
                case 180:
                    return true;
                //LandscapeRight or LandscapeLeft
                case 90:
                case -90:
                     return false;
            }
        }

    Unfortunately, this doesn't help (does nothing) and the view is still scrambled. So still looking for a fix...

  3. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 28 Apr 2014 Link to this post

    Hello J,

    It seems that the fix for this issue has been delivered in the InAppBrowser repo here. You can manually update your in-browser client in your project by following these steps

    Regards,
    Iva Koevska
    Telerik
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
  4. MoriartyX64
    MoriartyX64 avatar
    19 posts
    Member since:
    Jun 2013

    Posted 28 Apr 2014 in reply to Iva Koevska Link to this post

    Thanks, Iva. Using the provided instructions I see the InAppBrowser now respects the orientation settings from the app in iOS.

    However, when loading an external video in the InAppBrowser (using '_blank'), the user is still allowed to rotate the video when the player steps in. Although this is certainly desired behavior, on returning to the app (closing the InAppBrowser), the main layout is still scrambled due to this. 

    Any suggestions on how to fix this?
  5. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 28 Apr 2014 Link to this post

    Hello J,

    I did some digging around and it seems that this is a known issue in jQuery Mobile. The solution, however, is very simple. Make sure that in index.html, your <body> looks like this:

    <body style="height:100%;min-height:100%">  

    If you wish, you can set it in main.css as well. Hope this helps.

    The setup on which this worked for me is the following:
    Kendo UI Mobile-template based project
    Cordova 3.2.0
    InAppBrowser updated to latest from repo
    Kendo UI Mobile updated to 2014.1.416 (2014 SP 1)

    Regards,
    Iva Koevska
    Telerik
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
  6. MoriartyX64
    MoriartyX64 avatar
    19 posts
    Member since:
    Jun 2013

    Posted 28 Apr 2014 in reply to Iva Koevska Link to this post

    Excellent, Iva. The combination with updating the InAppBrowser from repo + the style fix seems to fix the issue.

    For the record, I'm running the same setup (without jQuery Mobile of course), only Kendo UI Mobile still on v2013.3.1507.

    Thanks!
Back to Top