We have an web app that was developed in Sencha Touch for iOS 7 (iPad) and is used from the home screen by most users. When users upgrade to iOS 8 they can still use the application, but there is a problem with the status bar.
The setting for the status bar is 'black'. This results in a black bar a the bottom of the screen and the text in white at the top of the screen. It seems that currently the only option for status bar that works correctly is 'black-translucent'. This option does not show any bar at the bottom of the screen, but the content of the application is displayed behind the text, which is correct.
Our application has a light grey background with on every page a titlebar. The white text of the status bar is unreadable and the buttons on the titlebars are partly disabled (top part). I want to solve this problem with a solution that does not affect users that use the application on any other platform then iOS and without having to change much in the application code.
I tried using a margin-top of 20px on the titlebar (using a override to apply to all titlebars) and a small div on the index.html which shows a black bar 20px high. This works fine, but does affect all users on all platforms. I tried to move the marginconfig to platformConfig, but this doesn't seem to work:
Neither do I see a possibility to include the override only when a certain profile is active.
Using a div without changing the titlebars-margin seems not possible, the titlebars are always placed at the top of the screen, the div will be displayed on top of the titlebar and again a part of the titlebar is unusable.
What other solutions can I try? What is the best solution?
The application has been developed originally in ST 2.2 and is recently upgraded to ST 2.4.1, the application is mainly used on iPad with iOS 7 (which will be iOS 8 in the near future and other devices as well in the second quarter of 2015). The application is using a custom theme.