App hiding iPhone status line (clock etc.)

[Michael4771079]

Hi Alena,
its fixed for ipa and apps compiled in xcode,
I just published an app on appery hosting and status bar still shows in header.
Are the any settings I need to alter in the builder?

thx

[Benny Halperin]

Michael,

I have a web app and that's what I did:

JavaScript:
pre
if (this.isIOS()) {
$("body").addClass("iOS");
}

isIOS: function() {
var regex = new RegExp(/(iPhone|iPod|iPad);.CPU.OS 7_\d/i);

Code: Select all

 return regex.test(navigator.userAgent); 

},
/pre
CSS:
pre
body.iOS .ui-page[data-role='page'] {
margin-top: 20px;
}

body.iOS .ui-page[data-role='page'] .ui-header {
margin-top: 20px;
}

body.iOS .ui-page[data-role='page'] .ui-header.ui-fixed-hidden {
margin-top: 0;
}
/pre

[Michael4771079]

Hi Benny,
thanks for the code, but I missed something,
I added css and js to project a s js and css asset,
it didnt work,
tried loading js on page load, caused errors.
The js is adding the class, so where have I gone wrong

thanks for your help

[Benny Halperin]

what's the error? run this JS code in $(document).ready(...)

[Michael4771079]

Im sorry Benny,
I dont want to annoy you, im not very good at coding.
I have the css as asset,
added js on load of start screen, with this code and this is the error

[Benny Halperin]

Hi Michael,

It's ok. Let me help you here. My code was copied/pasted from my source, no adjustments.
The CSS is ok as is. Here is the correct JS:
pre
$(document).ready(function() {
if (isIOS()) {
$("body").addClass("iOS");
}
});

function isIOS() {
var regex = new RegExp(/(iPhone|iPod|iPad);.CPU.OS 7_\d/i);

Code: Select all

 return regex.test(navigator.userAgent); 

}
/pre

[Michael4771079]

Cheers Benny, works good, thanks a lot for the input

[Michael4771079]

Hi Alena,
you mentioned that this issue is fixed for web apps, I need this confirmed please, Benny kindly gave me a workround that works, but doesn't solve all issues, for eg. addind the margin reveals the status bar when scrolling.

so if you can confirm apperio has fixed this, how do we implement it,
and if not,
how can I increase the size of the header above the header buttons by 20px

thx

[Alena Prykhodko]

Hi Michael,

I've double checked and find out that it was not supposed to be fixed for web apps, as it can be done only by means of custom CSS. We'll test the code Benny shared and update on the thread.

[Kateryna Grynko]

Hi Michael,

Could you kindly point us how to reproduce the issue?