Css error in ion-header

Ionic Framework
1

Captura de tela 2022-12-28 184533
Captura de tela 2022-12-28 184533433×690 229 KB

Hello!
every time I do an ionic build on my project,
the header looks like this,
any tips on how to resolve?

2

This is notch area issue.

  1. Have you imported the core.css in your global.scss file ?

  2. Do you use ion-toolbar inside the ion-header ?

  3. 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";
  1. 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;