I recently upgraded from 10 to OutSystems 11.
In the web preview of an iPhone X, the notch is covering the top header (and the bottom buttons are too low).
Here's a screenshot of the web previewer:
After finding this video, I inserted the CSS code presented and was still unable to see any changes on the web previewer. However, it looks exactly as it should on my physical device.
Does anyone know how to get the correct spacing to display for the iPhone X in the web previewer?
EDIT: Adding a screenshot of the rendered CSS for the mobile preview.
Hi Edie it might be worth checking out this Tech Talk to see if it helps.
https://www.outsystems.com/learn/lesson/1711/dealing-with-the-notch-the-right-way/?LearningPathId=0
Also does this just show like this on the web preview or the preview via the OutSystems app as well?
I referenced that video in my original post as what I used to get the correct spacing for the notch.
The second screenshot above is from an iPhone XR using the OutSystems now application (it's correct).
The first screenshot is from the web preview (it's not correct). The issue only occurs when previewing the application via the web.
Hi,
In the past I had an identical problem, and solved it according to this post.
Cheers,Nuno Verdasca
Nuno Miguel Verdasca wrote:
I did add that to my CSS. I have a screenshot of the CSS above. As you can see, it has the correct css applied, but the spacing rendered on the mobile previewer is incorrect.
Edie,
instead of Calc, try putting the CSS I show you below. I with this CSS, and with this setting in Extensibility Configurations, managed to overcome the problem.If you can't solve it that way, and if you can, share an example (via OML) so that me or a colleague here can help you better.
Here is what I have for the Extensibility Configuration:
{ "preferences" : { "global" : [{ "name" : "StatusBarOverlaysWebView", "value" : "true" }] }}
CSS:
RENDERED CSS:
Screen output.
It's still not working as intended.