Fix Outsystems UI issue with small phones - overlapping safe area in header - Native App
144
Views
3
Comments
Implemented
OutSystems UI

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. 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;

    

        }


 }

2020-04-15 12-37-36
Daniël Kuhlmann
mvp_badge
MVP

If you post this as a question on the OutSystems UI component support page, you will get a  better visibility of this, because the OutSystemUI dev team will automatically receive your complaint.

Thanks Daniel, will do.

Changed the status to
Implemented
on 05 Apr 2022

Hi Hubert,

Thanks for reaching us. I’m marking this as Implemented since this bug no longer occurs in the latest version.

Cheers,
Jéssica Mendes