723
Views
5
Comments
Solved
Mobile | Fullscreen on iPhone X / XS / XR
Question

Hello everyone,

I have a problem with mobile applications. I have read the forum and I did not find a solution that solved my problem. I have the latest version of SilkUI Mobile and I'm working on version 10 of the Outsystems platform.

My problem is that I'm not able to expand the screen to the top (the zone where, for example, the iPhone X has the hours), and to the bottom of the screen (where the button is).


Can someone help me with this problem?


Kind regards,

Nuno Miguel Verdasca

2025-11-19 06-14-01
Miguel Verdasca
Champion
Solution

Hello everyone,

I'll leave here two links that can help those with the same problem that I can, and that can help you understand the solution:

Dealing With the Notch the Right Way

Customize the Application Status Bar

Kind regards,
Nuno Miguel Verdasca

2025-01-07 17-06-54
Paulo Cação
Champion

Hi Nuno,

Try to use this CSS:

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}

Source: https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator


I hope this help you.

Regards

2025-11-19 06-14-01
Miguel Verdasca
Champion

Paulo Cação wrote:

Hi Nuno,

Try to use this CSS:

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}

Source: https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator


I hope this help you.

Regards

Many thanks for your help Paulo.

Regards


UserImage.jpg
Miguel Marques

Paulo Cação wrote:

Hi Nuno,

Try to use this CSS:

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}

Source: https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator


I hope this help you.

Regards

Thanks Bro it really help :P ;)


2025-01-07 17-06-54
Paulo Cação
Champion

You welcome @Miguel :)

2025-11-19 06-14-01
Miguel Verdasca
Champion
Solution

Hello everyone,

I'll leave here two links that can help those with the same problem that I can, and that can help you understand the solution:

Dealing With the Notch the Right Way

Customize the Application Status Bar

Kind regards,
Nuno Miguel Verdasca

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.