White Bar below status bar on iOS

2 posts, 0 answers
  1. Carter
    Carter avatar
    3 posts
    Member since:
    Jun 2015

    Posted 18 Jan Link to this post

        I am developing a hybrid app on Telerik App Builder, and I have an issue unique to iOS. All of the content appears to be shifted down by an amount equal to twice that of the status bar, so that a white bar appears at the top of the screen. This occurs both in-app, as well as in the simulators. This occurs throughout the entirety of the app.

     

    I have been unable to find any iOS specific styling in the CSS file, so I would posit that it is either a bug or an option accidentally enabled by another developer. Attached is a screenshot demonstrating the problem.

     

    WhiteBar.png is the scre

  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 19 Jan Link to this post

    Hi Carter,

    The reason for the white bar on iOS devices is most probably a breaking change in the newer versions of the Status Bar core plugin which causes the previously black status bar in your iOS apps to appear transparent or as a white strip. It is introduced with Apache Cordova 3.7.0. For more information, see the StatusBar release notes and the StatusBar issue. It is also listed in the AppBuilder's documentation here.

    In order to resolve it, you should edit the iOS Config.xml file following the steps outlined here and add the following preference:

    <preference name="StatusBarBackgroundColor" value="#000000" />


    You can replace #000000 with another hex value of your choice to provide a better fitting color.

    Please note that with the latest release we have changed the default iOS config.xml used in the AppBuilder so that projects by default have a black StatusBar background. 

    Let me know if this resolves the problem.


    Regards,
    Dimitrina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
Back to Top