CODEWITHSUNDEEP
iosangularcapacitor
Anik Saha
Anik Saha

Reputation: 67

Content displayed over the safe area iOS Capcitor angular

enter image description here

I am using capacitor for building this iOS app but the content displayed over safe area. I have used many css in app-header or body tag. But none of them are working. I also installed a plugin named capacitor-plugin-safe-area but can understand what to do after reading their documentation.

I am using angular 11 for front end and .net core for back end api.

Upvotes: 3

Views: 2938

Answers (3)

Alexandr S.
Alexandr S.

Reputation: 1804

pHorekka's answer helped me a lot, this is my working example for the react.js:

capacitor.config.json

{
  "appId": "com.your.app",
  "appName": "Your App Name",
  "webDir": "dist",
  "ios": {
    "contentInset": "always"
  }
}

Upvotes: 0

Ben Racicot
Ben Racicot

Reputation: 5951

You're looking for safe-area-inset-*

  padding-top: env(safe-area-inset-top);

Keep in mind that Capacitor has a plugin for more status bar options like light/dark mode.

Upvotes: 2

pHorekka
pHorekka

Reputation: 125

Make changes to capacitor.config file :

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
appId: 'com.company.appname',
appName: 'My Capacitor App',
webDir: 'www',
ios: {
     contentInset: 'always',
     },

 };

export default config;

Add contentInset property as 'always' for ios devices.

Upvotes: 6

Related Questions