Fix for iOs 7 status bar problem

7 posts, 0 answers
  1. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 17 Jun 2013 Link to this post

    I just tried one of our apps in the iOs 7 simulator, and it seems to work fine except for one thing: The status bar change in iOs affects the header in the Kendo Mobile app. The elements from the iOs status bar overlays the title and the button in the header.

    What's the recommended way to fix this?

    I was thinking about expanding the header, so that enough pixels are reserved for the status bar without it overlaying the other elements. But that should ideally just be done when on iOs 7.

    Screenshot attached.
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 18 Jun 2013 Link to this post

    Hello Robin,

    Given the significant design changes which are going to be introduced in iOS7, we are most probably going to provide an whole new look which targets it in our next major release (Q3). 

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

    Posted 20 Aug 2013 Link to this post

    Is there a slightly more accurate ETA than Q3 available?  
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 21 Aug 2013 Link to this post

    Hi Robin,

    The exact date for the release is not scheduled yet, but it is expect to be in the late weeks of November.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. David
    David avatar
    13 posts
    Member since:
    Oct 2012

    Posted 14 Oct 2013 Link to this post

    Hello,

    Has this been fixed with the latest release?  The image in that blog post appears to have the issue resolved.

    I have updated from internal build and am still having issues with the status bar overlapping the header.

    Thanks in advance.
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Oct 2013 Link to this post

    Hi David,

    Are you using PhoneGap? If yes and you want a seamless status bar in your app, you should specify the statusBarStyle Application option as "black-translucent" when initializing it. If you don't want a seamless status bar, you shouldn't specify it at all, as status bar style "black" is the default one. Please note that if you already have a meta tag for the status bar style in your application, you should remove it for the above mentioned options to work.

    On a side note Kendo UI Mobile initializes all needed meta tags (viewport, icons, status bar style) in order to work properly, so any additional tags you add may interfere with its normal operation. Kendo UI Mobile provides several options for configuring its meta tags on init.

    If you still have problems configuring the status bar style, I will need a sample page in order to decide what is going on and help you fix it.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Adrian
    Adrian avatar
    5 posts
    Member since:
    Jul 2013

    Posted 19 Nov 2013 Link to this post

    Thanks, using statusBarStyle: "black-translucent" works for me in phonegap 3.1

    However, the drawer function still overlaps the status bar. My workaround is to add in an empty header to the drawer so there is an empty title which is just the right height to push the drawer down below the status bar.
    <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
     </header>
Back to Top