Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the white space at iPhone X top viewport corners on ionic cordova [duplicate]

I followed the instructions here Understanding the WebView Viewport in iOS 11 and here Cordova app not displaying correctly on iPhone X (Simulator) to set viewport-fit to cover etc. But I still can't seem to get rid of these white corners on the top:

screenshot

What am I missing?

ionic (Ionic CLI)     : 3.15.2
cordova (Cordova CLI) : 7.1.0
Cordova Platforms     : ios 4.5.2
Ionic Framework       : ionic-angular 3.8.0
like image 652
Ben Avatar asked Nov 04 '17 17:11

Ben


People also ask

How to fix white dot on top left corner of iPhone?

With simple restart of your iPhone, the "white dot on the top left corner of iPhone screen" issue might get solved. Restart always helps to solve many problems. So we recommend you to try it for this issue too. For the time being, only steps for iPhone 11 and iPhone SE (2nd generation), 8, 7, or 6 are provided here.

How do I get rid of the white space between pages?

We would recommend duplicating the relevant page and delete sections until the white space disappears. When you find the section, try to disable “Stretch Section” under Layout. And make sure you don’t have a fixed width on this section or underlying inner sections and elements.

How do I fix the white space between pages in Elementor?

There are three main things you can do in Elementor to fix this. We would recommend duplicating the relevant page and delete sections until the white space disappears. When you find the section, try to disable “Stretch Section” under Layout.

Why is there a white space on mobile view?

There might be white space on mobile view for certain pages or templates when the cookie banner is enabled. This is due to the fact how Complianz calculated the width of the page. When the page has an element that is stretched with javascript or not responsive a white space might occur.


2 Answers

Eventually figured it out myself. In case anyone else has the same issue, here's what did the trick for me:

ionic cordova plugin rm cordova-plugin-statusbar

ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Refer to: https://github.com/apache/cordova-plugin-statusbar/pull/85

like image 128
Ben Avatar answered Jan 04 '23 12:01

Ben


Make changes in css .Add this code with existing code like

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

If you use toolbar button then go with:

.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}

Solution:

more help available at cordovo apache

stackoverflow solution

like image 22
Haza Avatar answered Jan 04 '23 11:01

Haza