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,GM
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.
Cheers,GM