Remove header and footer

Ionic Framework
1

Hello

I wanted to know how to remove the footer and the header only on one page, to remove the two white blocks on the top and the bottom of my page

Capture d’écran 2020-09-02 à 14.51.31
Capture d’écran 2020-09-02 à 14.51.31694×1442 133 KB

2 
  constructor(  private router: Route) {

this.router.events.subscribe(
      (event: any) => {
        if (event instanceof NavigationEnd) {
          if (this.router.url == 'login') {
           this.show_footer = false;
          this.show_header = false;
}
}

HTML

<app-header *ngIf="show_header"></app-header>
<app-footer *ngIf="show_footer"></app-footer>
3

How is your Page designed? Normally Header and Footer are included in the HTML, so you can just remove them. Please post the HTML of this specific Page.

4

This is my HTML :

<ion-content>
<div class="padding">
  <ion-buttons style="margin-top: 5vw;">
    <ion-button (click)="closeModal()">
      <ion-icon slot="icon-only" style="color: black;" name="close"></ion-icon>
    </ion-button>
  </ion-buttons>
    
    <div class="logo">
      <ion-icon color="light" name="person-circle"></ion-icon>
      <!-- <ion-icon color="light" name="contact"></ion-icon> -->
      <!-- <ion-icon color="light" name="cloudy-night"></ion-icon> -->
      <!-- <img src="../../assets/logo.png"> -->
    </div>
    <form [formGroup]="myGroup" (ngSubmit)="submitForm()" novalidate>
    <ion-item >
      <ion-label color="light">Email</ion-label>
      <ion-input color="light" name="email" type="mail" placeholder="jean.dupont@gmail.com"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="light">Mot de passe</ion-label>
      <ion-input color="light" name="password" type="password" placeholder="Mot de passe"></ion-input>
    </ion-item>

    <ion-item lines="none">
      <ion-button color="light" slot="end" fill="clear">Mot de passe oublié ?</ion-button>
    </ion-item>

    <ion-button type="submit" color="light" expand="block" shape="round" fill="outline">Connexion</ion-button>
    <br>
    <ion-button color="dark" expand="block" shape="round">Inscription</ion-button>
  </form>
  </div>
</ion-content>
5

Where do you create Header and Footer?

6

It is a modal I deleted the header. And the footer, no basic idea when I generate the page it does not appear

7

If you can create a reproducable repo i can have a look

8

remove margin-top on your modal close button its generate white space in your header area.

try to debug your footer space, it is same as the header

9

It’s done for the header, it works perfectly.

On the other hand for the footer, I can’t see where it could come from

10

try to run your application in the browser and find unnecessary white space using inspect element tool

11

In my browser I don’t have this space…

12

connect your mobile using data cable and then type this url “chrome://inspect/#devices”.
then you will find whats wrong with your app

13

image
image1366×768 159 KB

image
image1366×768 306 KB

image
image1366×768 314 KB

14

I solved the problem by forcing my app to be in portrait :smile: