Capacitor IOS Status Bar Overflow App

Capacitor
1

Hi,
I am having trouble with the IOS status bar. I would like to have a background color on the status bar, like black background and white text.

This is how it seems with BrowserStack with iPhone 12 Pro
Not expected Result

image
image313×554 12.7 KB

Expected Result
image

I have tried many things that doesnt have worked (maybe i’ve implemented bad some ones):

  • –ion-safe-area-top: env(safe-area-inset-top);
  • @awesome-cordova-plugins/status-bar/ngx;
  • @capacitor/status-bar .hide() when Platform ready
  • checking content=“viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”
  • playing with ion-header classes like ion-padding, ion-border
  • taking off
  • <key>UIStatusBarHidden</key>
  • <key>UIViewControllerBasedStatusBarAppearance</key>
in my index html I have this meta. its seems like doesnt do anything 
<!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

The header is a component called menu that is called in main.page html in this way

  <app-menu></app-menu>
  <app-header></app-header>
  <ion-content class="content" [fullscreen]="true">
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
</div>

<ion-tabs>
...
</ion-tabs>

this is menu.component.html

<ion-menu side="start" contentId="main-content">
  <ion-content>
    <ion-list>
        ....
     </ion-list>
  </ion-content>
</ion-menu>

this is my menu.compoent.html

<ion-header class="ion-padding">
  <ion-toolbar>
    <ion-buttons slot="start">
     ....
    </ion-buttons>
     ...
  </ion-toolbar>
</ion-header>

Ionic -v 7.1.1

please, any suggestions? what should I try?

2

the div that envolves main page header and ion-content is

<div class="ion-page" id="main-content">
  <app-menu></app-menu>
  <app-header></app-header>
  <ion-content class="content">
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
</div>

<ion-tabs>
...
3

This is for the Cordova plugin cordova-plugin-statusbar. If you are using the first party Capacitor plugin @capacitor/status-bar, then you don’t need it.

It would appear the safe area padding is not being applied. Ionic should do this automatically on the first IonToolbar (source).

If you could provide a full example on StackBlitz that would be the most helpful.

4

I thought the same thing but in the repository said that worked in capacitor. not at the end.

here you have twestrick, if you can find where is the error, please tell me.

5

Does it actually run in StackBlitz? I am just getting “Compiling application & starting dev server…” which never finishes.

6

nop, it doesnt. but the error was not going to be reproduced anyway. In web works well. in ios is the problem

i could solved it, the problem was that my global.scss and variables.scss weren’t working.
so when I tried this style in global.scs did not worked

body {
    margin-top:env(--ion-safe-area-top);
    ...
}

So I went, and attacked the necessary component. the header, the lower tabs
ion-header{

.ion-tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
}


ion-header
{
  padding-top: env(safe-area-inset-top);
}

image
image287×546 32.7 KB