nijakobius commented on issue #1465:
URL:
https://github.com/apache/cordova-android/issues/1465#issuecomment-1297366740
I have the solution!
1. Add this to your `<head>`:
```
<style>
:root {
--safe-area-top : env(safe-area-inset-top);
--safe-area-bottom: env(safe-area-inset-bottom);
}
</style>
```
2. Add the StatusBar plugin:
https://github.com/apache/cordova-plugin-statusbar
3. Use `<preference name="StatusBarOverlaysWebView" value="false" />`
4. Add the following JavaScript:
```
document.addEventListener('deviceready', () => {
var initialHeight = document.documentElement.clientHeight;
window.addEventListener('resize', getStatusBarHeight);
StatusBar.overlaysWebView(true);
function getStatusBarHeight() {
var currentHeight = document.documentElement.clientHeight;
document.documentElement.style.setProperty('--safe-area-top',
(currentHeight - initialHeight) + 'px');
window.removeEventListener('resize', getStatusBarHeight);
}
}, false);
```
This will first calculate the `clientHeight` WITH the StatusBar and then
WITHOUT it. The difference will be saved in a CSS variable. Then, in your CSS
just use `var(--safe-area-top)` wherever you would have used
`env(safe-area-inset-top)` :)
For a quick test, add the following to `<body>` and you'll see that the red
box (using `env(safe-area-inset-top)`) ignores the safe area while the blue box
(`var(--safe-area-top)` respects it:
```
<div style="position: absolute; z-index: 2000; top:
env(safe-area-inset-top); height: calc(100vh - env(safe-area-inset-top) -
env(safe-area-inset-bottom) - 3px); width: 5vw; background-color: rgba(255, 0,
0, .1); border: 1px solid red; "></div>
<div style="position: absolute; z-index: 2000; left: 5vw; top:
var(--safe-area-top); height: calc(100vh - var(--safe-area-top) -
var(--safe-area-bottom) - 3px); width: 5vw; background-color: rgba(0, 0, 255,
.1); border: 1px solid blue;"></div>
```
<img width="644" alt="Screenshot 2022-10-31 at 17 37 31"
src="https://user-images.githubusercontent.com/37240226/199061068-4cb61c2e-63b4-4a3e-8c0b-ae12b66db38a.png";>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/37240226/199061068-4cb61c2e-63b4-4a3e-8c0b-ae12b66db38a.png"](https://user-images.githubusercontent.com/37240226/199061068-4cb61c2e-63b4-4a3e-8c0b-ae12b66db38a.png"){kind=link}