Capacitor Status Bar Overlaps Pleasw Helps

Anyone how can i resolve this issue? When i use SetOverlaysWebView({ overlay: true }) then this is the result it overlaps my toolbar. Can anyone help me resolve this issue. I’m using Ionic 5 with vue 3.

I don’t think I have the official right answer, but in the past I remember having to adjust margin/padding on the top of the app before. In the variables.css I put:

body {
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

Try that and see if it helps?

1 Like

It’s not working. :disappointed:

Hard to say what the issue might be without seeing your code. Can you push a minimal version of your app to a repo and post a link here?

Make sure you have the correct viewport meta tag in your index.html:

Thanks Guys. It’s working now. Thanks for help!