Orientation change in iOS7.1 (iPhone 4) with minimal-ui meta-tag doe

6 posts, 0 answers
  1. Jari
    Jari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 28 Mar 2014 Link to this post

    Hi,

    With Kendo Mobile version 2014.1.318, I'm using the following meta tag to get rid of Mobile Safari's toolbars in iOS7.1 (iPhone 4):

    <meta name="viewport" content="minimal-ui" />

    Changing orientation from portrait to landscape with this meta tag in place leaves the bottom part of the screen unused or, in other words, messes up the view's scroll position so that the top part of the screen gets hidden and "blank" content is shown at the bottom of the page.

    This won't occur if the app is loaded from a home screen web app shortcut (toolbars are hidden automatically).

    Slightly modified example code from Telerik's demos below (attached too). 

    Original: http://demos.telerik.com/kendo-ui/mobile/layout/index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="minimal-ui" />
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
    </head>
    <body>
        <div data-role="view" data-layout="layout" data-show="layoutShow" id="layoutView">
        <p>
            This examples shows the platform specific layouts. Change the OS to see how the header and footer changes.
        </p>
        <p>
            With Kendo Mobile version 2014.1.318, I'm using the following meta tag to get rid of Mobile Safari's toolbars in iOS7.1 (iPhone 4):
        </p>
        <p>
            <code><meta name="viewport" content="minimal-ui" /></code>
        </p>
        <p>
            Changing orientation from portrait to landscape with this meta tag in place leaves the bottom part of the screen unused or, in other words, messes up the view's scroll position so that the top part of the screen gets hidden and "blank" content is shown at the bottom of the page.
        </p>
    </div>
     
    <div data-role="layout" data-id="layout" data-platform="ios">
        <header data-role="header">
            <div data-role="navbar">
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
                <span data-role="view-title">iOS Platform</span>
            </div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="contacts">Profile
                </a><a data-icon="settings">Settings</a>
            </div>
        </footer>
    </div>
     
    <div data-role="layout" data-id="layout" data-platform="android">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title">Android Platform</span>
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            </div>
        </header>
     
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="history">Sales</a>
                <a data-icon="settings">Settings</a>
            </div>
        </footer>
    </div>
     
    <div data-role="layout" data-id="layout" data-platform="blackberry">
        <header data-role="header">
            <div data-role="navbar">
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
                <span data-role="view-title">BlackBerry platform</span>
            </div>
        </header>
     
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="favorites">Rating</a>
                <a data-icon="settings">Settings</a>
            </div>
        </footer>
    </div>
     
    <div data-role="layout" data-id="layout" data-platform="wp">
        <header data-role="header">
            <div data-role="navbar">
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
                <span data-role="view-title">Windows Phone platform</span>
            </div>
        </header>
     
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="home">Home</a>
                <a data-icon="globe">Global</a>
            </div>
        </footer>
    </div>
     
    <style scoped>
        #layoutView .km-view-title
        {
            visibility: inherit;
        }
     
        .km-android #layoutView .km-view-title
        {
            display: block;
            position: static;
        }
    </style>
     
     
    <script>
        var app = new kendo.mobile.Application(document.body);
    </script>
    </body>
    </html>


  2. Jari
    Jari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 28 Mar 2014 in reply to Jari Link to this post

    Oops,

    I forgot my questions from above... :)

    Does anyone know how to fix this or if there's a workaround for this?
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 01 Apr 2014 Link to this post

    Hello Jari,

    Thank you for contacting us. We did reproduce this behavior once iOS 7.1 came out, but we are not sure what causes it or how can this be worked around. My guess is this problem will not be specific to Kendo UI Mobile only. 

    Once we discover the root cause, we are most likely going to address it with an internal build or a documentation article, depending on the nature of the problem. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Jari
    Jari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 01 Apr 2014 in reply to Petyo Link to this post

    Hi Petyo,

    Thanks for your answer. It would be nice if you update this thread when/if you find some solution for this issue.

    One additional note: I have a tabstrip in my app and navigating to another view with it "fixes" this issue until next portrait -> landscape change.

    -Jari
  5. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 03 Apr 2014 Link to this post

    Hi Jari,

    I am marking this thread for a follow up on our side. Indeed, several random gestures seem to "unstick" the view from this mode. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 10 Sep 2014 Link to this post

    Hi guys,

    A quick update - it seems like Apple no longer supports this feature in its upcoming iOS8 release. Given the quick iDevice upgrade cycle, I think we may consider this feature as no longer relevant. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top