Getting rid of mobile header white space

0
Hi,  I designed a custom header for the mobile app. However, I can’t eliminate the default one which creates a white space on the top.  Any ideas how to get rid of it? (see attached image)    I tried CSS workaround , but apparently , It affects the entire page. 
asked
2 answers
0

Native mobile app I assume? Can you describe your page in more detail, including the native layout that your page uses?

Guessing: you have “Orders” set as page title and your page’s layout has the Page Title in the header of the layout. The layout has the property ‘header’ set to ‘yes’. Does it help to reduce the layout’s property ‘Canvas height’ to a smaller number of pixels?

Hm, reading your question again: ‘ I can’t eliminate the default one ’ makes me expect your ‘Custom header’ is not a layout-template but a snippet that you insert into your page, keeping the page’s Layout set to a standard NativePhone-layout of Atlas_UI_Resources. So then you will probably be able to set the ‘Header’ to ‘no’ for that one, or better change your snippet to a layout.

Having to guess to much to give you a solid answer, but I hope this helps already somewhat.

answered
0

Hi Efry,

This is the save area, that is use for notches in the iPhone for cameras. You can remove this using Save Area View  https://github.com/mendix/widgets-resources/tree/master/packages-native/safe-area-view, which is part of the Native Mobile resource module https://appstore.home.mendix.com/link/app/109513/  and the mobile starter apps.

Please note that this might not always behave the same way with Android phones with a camera in screen, please test with your target devices.

Cheers 

Andries

answered