search

mendixlabs / image-viewer

MOVED to:
https://github.com/mendix/widgets-resources/tree/master/packages-web/image-viewer
Apache License 2.0
0 stars 2 forks source link

widget toolbar overlays statusbar on iphone x #13

Open MulderWH opened 5 years ago

MulderWH commented 5 years ago

Describe the bug The widget toolbar overlays the statusbar on iphone x, which makes it difficult to tap the zoom and close buttons.

To Reproduce Create a hyrbid app for iOS and make sure the statusbar overlays the webview. You do this by editing the config.xml and set StatusBarOverlaysWebView parameter to true.

Expected behavior Place the toolbar under the iphone x notch so you can clearly see the toolbar. In our project I would add something like this in css, but not sure where to put this in this widget:

/* Status bar height on iOS 11.0 */
padding: constant(safe-area-inset-top) 0 0 0;
/* Status bar height on iOS 11+ */
padding: env(safe-area-inset-top) 0 0 0;

Screenshots, gif animation IMG_4138

Add sample project The issue only occurs on and iphone x with a statusbar that overlays the webview.

Andries-Smit commented 5 years ago

Thank you for reporting this issue, we have a look if we can bring this standard into the widget.

MulderWH commented 5 years ago

Cool tx. I did try adding this css to the widget, but that did not help. Learning something new here;-) https://github.com/frontend-collective/react-image-lightbox/issues/157