Top Page Padding - ios v Android

Question
1

Hi All

A pesky problem. I have 24px padding at the top of all my pages. And looks fine on Android but on an iphone 7 the pages look like they have nothing at all…very bunched up at the top.

I have been focused on android up until now and now just starting to test on ios…and mostly it is all fine…this is the most obvious quirk.

Any ideas? I have previously had trouble with the functionality around the bottom padding (which simply doesn’t work and a ticket has been raised…).

Thanks

2

@Mevi

Any ideas? :slight_smile:

3

This is something that naturally happens if you are doing a custom navigation bar on iOS and have disabled safe area. The safe area is there to mitigate this, so if you want you can re-enable it. The other option is to check what device the user is using and adding more padding for iOS :slight_smile:

4

Hi Mevi

Thanks for this. I found ‘safe’ area but do not remember disabling it. Any docs on this?

OK. One thing I have not done at all is finesse my app for Android or ios differences…Apart from the way audio files are loaded, and this issue, I haven’t needed to (the audio one is quite bad for me but a few people have raised it and seems there is no solution…).

Best way to do the padding? I figure I should set an app variable using systemVars.os. and say, set it to 1 if it is ‘ios’, and 2 otherwise using IF functions.

And then in every top padding, again use IF functions to set the padding. IF app variable is 1, bigger padding, otherwise normal padding…

I have a history of working in Excel a lot, so it seems I always want to solve every problem with IF functions!!! Thoughts appreciated!

Thanks
Paul

5

Hey Mevi,

A few questions for you here :slight_smile:
Thanks
Paul

6

Hi, sorry for the long delay but just in case you or someone else still needs the info: Yes I have used formula logic with systemVars to determine when to add more or less padding when required. As for documentation about the safe area, please see Pages