Hello!
every time I do an ionic build on my project,
the header looks like this,
any tips on how to resolve?
This is notch area issue.
-
Have you imported the core.css in your global.scss file ?
-
Do you use ion-toolbar inside the ion-header ?
-
Your glabal.scss should be looked like this by default
/*
* App Global CSS
* ----------------------------------------------------------------------------
* Put style rules here that you want to apply globally. These styles are for
* the entire app and not just one component. Additionally, this file can be
* used as an entry point to import other CSS/Sass files to be included in the
* output CSS.
* For more information on global stylesheets, visit the documentation:
* https://ionicframework.com/docs/layout/global-stylesheets
*/
/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";
/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';
/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
- If your want to support notch area by ionic the you use your header like this. Notch or safe area is responsive in ion-toolbar.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{ folder }}</ion-title>
</ion-toolbar>
</ion-header>
I have the same issue when I initialised the angular project in ionic the I faced the issue. I am using capacitor where have some configuration which is also very helpful. in your capacitor.config.ts. contentInset: ‘always’. But there would be height issue which will be managed by self. somewhere your list last item will hide behind the screen where for ios, padding bottom needed.
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.ionicApp.amin',
appName: 'Amin,
webDir: 'www',
bundledWebRuntime: false,
ios: {
contentInset: "always"
}
}
export default config;