Forum | Appery.io

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

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);

 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

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

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

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

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);

 return regex.test(navigator.userAgent); 

}
/pre

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

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

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.

Hi Michael,

Could you kindly point us how to reproduce the issue?