[OutSystems UI] Overlapping safe area in header on small phones - Native
Forge component by OutSystems R&D
Application Type

I found that on small phones like the iPhone 8 (resolution 750x 1334) that the top of the header overlaps with the phone's status bar. As a workaround, to fix this I used below java script and added a conditional CSS class to the header container adding 20px margin to the top of the container. A fix like this could be added to the Outsystems UI.

if($parameters.iOS) { 
    var ratio = window.devicePixelRatio || 1;
    var screen = { 
        width: window.screen.width * ratio, 
        height: window.screen.height * ratio 
    if (screen.width === 750 && screen.height===1334) {
        $parameters.IsIphone8 = true; 

Hello Hubert.

First of all, thank you for the feedback.
Could you kindly share some screenshots and a module with that behavior?
Which OutSystems UI version are you using and which layout is on your app?
Thank you and we'll wait for some feedback.

Best Regards,

Hi Gonçalo,

iPhone 8:

Iphone 11:

Outsystems UI:

Version 2.6.7

Layout used is the standard Layout template, 'Layout'

Thanks & Regards, Hubert.

Hello Hubert.
We ran some quick tests and couldn't replicate that issue.
Would it be possible to share a sample module with that issue replicated?

Thanks for your collaboration.


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