Tabstrip cropped on Landscape on iOS7 (iPad2)

3 posts, 2 answers
  1. Chris @ Willows Consulting Ltd.
    Chris @ Willows Consulting Ltd. avatar
    15 posts
    Member since:
    Sep 2013

    Posted 30 Oct 2013 Link to this post

    Hi Guys,

    I have found a weird behavior on iPad2/iOS7 on Landscape only: the bottom of the tabstrip is cropped. See screenshot attached.
    Live URL is:
    http://www.semiconductorconnect.org/kendo/

    However: when you switch from Landscape to Portrait: the tabstrip is displayed properly.

    Regards.
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 01 Nov 2013 Link to this post

    Hi Sean,

    This seems to be the same problem discussed in this thread. We are looking into it, but so far no other workaround than the one mentioned there exists.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Chris @ Willows Consulting Ltd.
    Chris @ Willows Consulting Ltd. avatar
    15 posts
    Member since:
    Sep 2013

    Posted 06 Nov 2013 Link to this post

    This is my code:
    $(window).resize(function(){
    // BUG iOS7 - Safari - iPAD2
    if (kendo.support.mobileOS.ios && kendo.support.mobileOS.tablet) {
            // PORTRAIT:
            if ($(window).height()>$(window).width())
                $(document.documentElement).height(($(window).height())+'px');
            // LANDSCAPE:
            else
                $(document.documentElement).height(($(window).height()-20)+'px');
            window.scrollTo(0,0);
        }
    });
      
    $(document).ready(function() {
        // BUG iOS7 - Safari - iPAD2
        if (kendo.support.mobileOS.ios && kendo.support.mobileOS.tablet) {
            // PORTRAIT:
            if ($(window).height()>$(window).width())
                $(document.documentElement).height(($(window).height())+'px');
            // LANDSCAPE:
            else
                $(document.documentElement).height(($(window).height()-20)+'px');
            window.scrollTo(0,0);
        }
      
    });
Back to Top