I am lost between the different plugins to avoid overlay with the system bar (edge to edge)

Capacitor
1

Hello,

Coud you please clarify the best way to avoid that the content of the app overlays the system bars ?

I am developping for android, ios and web with capacitor 7.0.

I have seen:

  • @capacitor/status-bar plugin and the option overlaysWebView = false
  • @capawesome/capacitor-android-edge-to-edge-support plugin
  • capacitor-plugin-safe-area plugin
  • @capacitor-community/safe-area
  • The configuration file of capacitor and the “adjustMarginsForEdgeToEdge” parameter for android and “contentInset” parameter for iOS

I am lost amongst all those possibilities, that are probably imcompatible between each other, and not all up-to-date. What is the recommended practice ?

From what I understood, either you ask the webview to be small enough to not clash with the system bars, either you handle this with css adding and safe-area-insets-*…

On top of that this topic is linked to some keyboard issues. Sometimes the input is hidden by the keyboard (the view is not resized) or strange margin appear on top of the keyboard (see Keyboard plugin inaccurately resizing the webview on Android API 35 · Issue #2371 · ionic-team/capacitor-plugins · GitHub for which installing @capawesome/capacitor-android-edge-to-edge-support was a solution).

If you can simply provide the recommended practice, which plugin, which configuration, which html viewport meta. Please note that I am not an android or ios developer so I do not understand the native code (and I do not want to learn that’s why I am using capacitor :slight_smile: ).

Probably putting this in the documentation would be good as well.

Thanks

1 Like
2

Hi, I was facing a similar issue earlier, but after using @capawesome/capacitor-android-edge-to-edge-support, I was able to fix the problem for the top system status bar/notification bar.

However, I’m now running into a different issue at the bottom navigation area (where the three system navigation buttons are located). The navigation bar background turns white, and as a result, the buttons are not visible.

I’m currently looking for a solution to this and have also raised the question on the Ionic forum. Any guidance or workaround would be greatly appreciated.

3

Did you find a solution for the bottom bar?

4

For the insets, if anyone wants work around that works great on both Android and iOS, I used the SafeArea plugin only and setting insets in CSS. But with some few Android devices that do not push bottom chat input high enough when the Virtual Keyboard shows up, and cut it by half for example, I use @capawesome/capacitor-android-edge-to-edge-support plugin but it’s only for Android and I have to remove manual CSS insets, but it does not work with iOS, so I’m figuring out a way to dynamically apply insets of SafeArea only for iOS.

Here is a solution for @capacitor-community/safe-area

capacitor.config.ts :

plugins: {
SafeArea: {
enabled: true,
customColorsForSystemBars: true,
statusBarColor: ‘#00000000’, // transparent
statusBarContent: ‘dark’,
navigationBarColor: ‘#00000000’, // transparent
navigationBarContent: ‘dark’,
offset: 0,
}
}

In CSS, I use a class for example, the most outer wrapper for example. Safe Area plugin inject variable even if the env(safe-area-inset-top) is not set.

.main_layout {
padding-top: var(--safe-area-inset-top);
padding-right: var(--safe-area-inset-right);
padding-bottom: var(--safe-area-inset-bottom);
padding-left: var(--safe-area-inset-left);
}

This will ensure everything in the layout to be fit under the Safe Area measurements of insets like Camera, Bottom Keys, rounded border screen, etc. And keep background color in Main Layout. And if you want to go on View Height like 100vh , 100dvh , you can use calc and remove top and bottom insets:

.sub-layout-height {
height: calc(100dvh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
}

1 Like