Forum | Appery.io

I'm currently working on a login page and something came up. When testing app in the web-browser (when pressing "test" in project) everything looks fine. When I scan the QR code with my iPhone and open the app in Safari mobile browser a problem appears. You can always "scroll down" a bit to hide the url field in safari (and chrome) thus making the app window being placed a bit further up. When doing this a white area appears "below" the app, looking like the app doesn't fill the entire browser..

Is this a known problem and can something be done because it looks ugly..?

I've vertically centered my content, code:
Appery('LoginGrid').css('position', 'absolute');
Appery('LoginGrid').css('top', '50%');
Appery('LoginGrid').css('margin-top', '-224px');
Appery('LoginGrid').css('left', '50%');
Appery('LoginGrid').css('margin-left', '-142px');

is this something that might cause the problem? Feels like I've tried everything.

I have pictures of problem if you don't understand what I'm trying to say, haha.

Thankful for your help.

Victor

no problem:
https://d2r1vs3d9006ap.cloudfront.net...

problem:
https://d2r1vs3d9006ap.cloudfront.net...

Hello,

What device and iOS version are you using? Did you run app in Appery.io tester or in mobile browser?

iPhone 5s iOS 7.0.4. Tried both appery.io tester (which works as supposed on computer) and mobile browser (which causes the problem with the white part in the bottom).

You are welcome to look at my project to see if I'm causing the problem myself somehow.

Tried exporting project to html/css/js and opened index.html in xCode's iOS simulater's safari browser. The problem is there too. Seems to be same problem in all mobile browsers.

Did you share the project with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a? What is the project name?

emailed now, it's called Karma Network

We'll test it but it will take some time.

No problem, thank you very must for looking into it.

Hi Victor,

I can't reproduce it now, have you changed your project?

width="306"

Oh yeah sorry, i've been working on the project tonight. The problem is still the same though; those green lines at the bottom, thats the rectangular area that shouldn't be there, only when I try it the area is further down making the area appear further down, like 30px'ish under the log in with facebook button.. I won't be changing anything more in the project now in like 14h.