Capacitor/IOS Status Bar

Capacitor
1

Hi,
I am having trouble with the IOS status bar. I would like to have a background color on the status bar, but looks like you cannot do this with Capacitor. I would like the background colour due to the screenshot:

Screenshot 2021-12-10 at 16.53.45
Screenshot 2021-12-10 at 16.53.451138×1836 94.8 KB

The status bar looks a bit lost. Does anyone have any suggestions as to how this can be resolved and best practices for webview?

2 Likes
2

Are you using the Capacitor Status Bar Plugin? You should be able to set the background color using StatusBar.setBackgroundColor()

1 Like
3

Can you share your code for the page/modal?

It looks as if the <ion-header> may have been placed in the <ion-content>.

4

I am not using ionic, just capacitor with my own custom styles

5

Hi, I have not tried this but it says it has been disabled on IOS in the docs?

6

I’m having the same status bar overlapping problem your screen shot shows. The Capacitor Status Bar plug in says the overlap settings do not work for iOS. How am I supposed to fix this?
I’ve seen many old posts with CSS workarounds that do not work anymore.

Please someone drop a light on this issue for us! Thanks!

1 Like
7

Any update on this please?

8

If the Status Bar plugin doesn’t fit your needs, you can manually set the status bar color in the Main.storyboard file.

Go to the Main.storyboard file; select the View; and in the Attributes Inspector, change the Background Color to whichever color you’d like. The background color includes the status bar and shouldn’t affect your web app since the webview extends to the top of the screen (minus the statusbar).

9

Thanks @thomasvidas. I will try this!

10

@thomasvidas Hi, looks like you can’t do this anymore, I couldnt see the option and says it has been removed online - any ideas?

11

Does anyone have any idea how to do this within xcode itself please. @thomasvidas the method you mentioned, I can’t see these options in xcode. It’s worth mentioning im using the SwiftUI.

12

I think the best way is to extend your header to cover the status bar. Place the header at the very top of the screen and push the toolbar content down with some padding.

13

some padding

That’s actually the issue. How to know what padding is needed? It depends highly on the iPhone model.
How to solve it in a clean way?

14

You could use the safe-area css property

padding-top: constant(safe-area-inset-top); // for ios 13+
padding-top: env(safe-area-inset-top); // for previous ios versions
15

I couldn’t make it work with the insets. Instead, I am using

it works pretty nice on various apple products,

16

@Kaltersand Normally the toolbar should adopt the safe area of the current device. Make sure you use the correct syntax:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  ...
</ion-content>

To get the right safe area you can use the var() function:

ion-toolbar {
  --padding-top: var(--ion-safe-area-top);
}

@ellismonva You should be able to apply var(--ion-safe-area-top) to your custom toolbar.

17

Yes, this applies if you are using ion. However, I don’t, I am only using capacitor.

18

You can use CSS with safe-area-inset-* (top, bottom, left, or right) as described here on MDN.

19

This Plugin could be a solution:

20

@mariusbolik This plugin only for android not iOS :frowning: