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

Question

I am working in my Ionic 4 App and I have installed the Ionic 4 tab theme and I have made the header common by adding the header code in the app.component.html but the problem is that my is overlapping with the header.

This is my app.component.html:

<ion-header>
    <ion-toolbar>
    <ion-icon name="more" slot="end"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

This is my tab1.page.html:

<ion-content>
    <ion-card class="welcome-card">
        <ion-img src="/assets/shapes.svg"></ion-img>
        <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
        </ion-card-content>
    </ion-card>
</ion-content>

I have just installed the fresh theme of tabs in Ionic 4 and I have done these changes only.

Any help is much appreciated.

This is my StackBlitz

Answer 1

To avoid the overlapping of ion-content you should add a style to the ion-content

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

.content{
 margin-top: 50px;
}

You can try the above way or else try if this works..

<ion-content padding>

</ion-content>

Add padding to the ion-content tag

You can check any other solution suits for you here ion-content overlaps with header

Answer 2

For those who don't want to deal with approximative css styles, @AJT82 pointed out the right way to deal with this. By creating a custom header component, you won't have to use any margin or padding styles. Also, you will have the choice to display a custom title on specific page.

Assuming my toolbar needs to be on my component HomePageModule, I created a subcomponent toolbar.ts. Then I import it inside home.module.ts and declare it into home.page.html.

toolbar.ts
using Input to retrieve the title parameter from 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
display the title receive from the module:

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

home.module.ts
import the toolbar's module:

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

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

home.page.html
then, declare it inside the home template with the title parameter:

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

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

Each page should import this component and declare it into its html page. By using this, the toolbar doesn't overloap the content page, and it can display a specific title.