Mi contenido de iones se superpone con el encabezado en Ionic 4

Solución:

Para evitar la superposición de ion-content deberías agregar un estilo al ion-content

<ion-content class="content"></ion-content>

.content{
 margin-top: 50px;
}

Puede intentarlo de la forma anterior o intentarlo si funciona.

<ion-content padding>

</ion-content>

Agregue relleno al ion-content etiqueta

Puede comprobar cualquier otra solución adecuada para usted aquí. El contenido de iones se superpone con el encabezado.

Para aquellos que no quieren lidiar con estilos CSS aproximados, @ AJT82 señaló la forma correcta de lidiar con esto. Al crear un componente de encabezado personalizado, no tendrá que usar ningún estilo de margen o relleno. Además, tendrá la opción de mostrar un título personalizado en una página específica.

Suponiendo que mi barra de herramientas debe estar en mi componente HomePageModule, Creé un subcomponente toolbar.ts. Luego lo importo dentro home.module.ts y declararlo en home.page.html.

toolbar.ts

utilizando Input para recuperar el title parámetro de html:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-toolbar',
  templateUrl: 'toolbar.html',
  styleUrls: ['toolbar.scss']
})
export class AppToolbar {
  @Input() public title: string;

  constructor() {}
}

toolbar.html

mostrar el title recibir del módulo:

<ion-header>
  <ion-toolbar>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

home.module.ts

importar el toolbarmódulo de:

import { AppToolbar } from './toolbar/toolbar';

@NgModule({
  declarations: [AppToolbar]
})
export class HomePageModule {}

home.page.html

luego, declararlo dentro del home plantilla con el title parámetro:

<app-toolbar My ion-content is overlapping with the header in Ionic 4

="'My Custom Title'"></app-toolbar>

<ion-content>
    <!-- content -->
</ion-content>

Cada página debe importar este componente y declararlo en su página html. Al usar esto, el toolbar no sobrepasa la página de contenido y puede mostrar un título específico.

---

---

Utiliza Nuestro Buscador