Hi,
I have a mobile optimised website and have put the below code in the BODY part of the ‘script in the body’ settings to allow content to cover the notch area on iPhones.
This works as intended on allowing content to display over the iPhone notch.
However when I open a popup, the popup is within the notch area, with a white stip at the bottom as the viewport has been raised.
I have tried adding a CSS style to the popup element to add padding and a margin but to no avail.
Do I need to add some style CSS to the ‘script in the body’ settings or is there a CSS style I can apply (via a HTML element and using ID attributes) to make this work correctly.
The screenshots are shown from when the website is saved to home screen as a PWA. This is a paid version so the script in the body elements are working as intended.
Thanks.
As a temporary solution it might be an option to use the Run Javascript action from the Toolbox plugin right after workflow step you use to show the popup with the code below:
y_pos = ‘200px’;
var element = document.getElementById(“id_popup”);
element.style.top = y_pos;
Remember to change the text id_popup to the id of the popup and change y_pos to the position you need it to be.
Hi Gerbert.
I’ve given that a go but it hasn’t had any effect.
That is weird, it did work when I tested it. A couple of questions:
- Is the text “Popup share WL make public” the ID of the element, isn’t that the name? Just to be sure, you are using the field “ID attribute” to set the ID right (if not available activate it through Settings - General - Expose the option…")?
- If you are using the field ID attribute already, is it possible to use a short ID, like “popup_share_wl”.
Hi,
You are correct I did initially set this as the popup name but realised it should have been the ID attribute which I then changed and still no luck. I made the ID attribute short.
I’ve also tried applying it to a different popup (using a different ID) and still no luck.
That is unfortunate. I can have a look tomorrow just like we did last week, just send me a PM if needed. 
Can you temporary change the Animate step to Toggle? It seems that is the difference between your and my worflow. So first Toggle and than Run Javascript. Maybe farfetched but worth a try.
I replaced the animate with a show element but no luck.
This issue is only a problem when you have done the ‘add to homescreen’ option to add a bookmark to your home screen.
There must still be something not correct of different in your set up (or in mine 
), just tested it with the Animate and Show step and it works:
Without Run Javascript:
With Run Javascript:
Can you press F12 (to show the Developer Tools of your browser) and go to tab Console, and when you click the button to show the popup keep an eye out for error messages?
Strange. Nothing in the console when I run it.
