Ion Footer overlap content

Hi. In my project I have different pages and all of them have a common footer defined in page app.html. The problem is that the footer overlap che content at the bottom of all my pages.

I’ve seen a lot of questions about this problem, but I could not find any solution that worked for me.

This is the code of app.html page:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
      <button menuClose ion-item (click)="presentConfirm()">
        Log out
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-footer>
  <ion-toolbar>
        Footer
  </ion-toolbar>
</ion-footer>

This an example of a standard page:


<ion-header>
  <ion-navbar>
    <ion-title>Welcome to Cesena Esplora!</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="card-background-page">
         
  <!--Contiene l'immagine -->
  <ion-card>
      <img src="assets/img/cesena.jpg"/>
      <div class="card-title">CesenaEsplora</div>
      <div class="card-subtitle">Un nuovo modo di visitare la città</div>
  </ion-card>

  <p class="button-login-reg">
    <button ion-button (click)=openLoginPage()>Login</button>
  </p>
  <p>
    <button ion-button (click)=openRegisterPage() >Register</button>
  </p>

</ion-content>

Thank you in advance.

Isn’t this how a footer is supposed to work?

Well, no. I want see all my content. And this footer don’t let me see the bottom content of my ionic-content!

Then you probably shouldn’t use an element that was meant to look like a … footer.

How should your footer work? Should it scroll with the content?

Do you still get this behavior when you remove the footer from app.html and add it to your standard page?

The app.html files I use only have entries like <ion-menu> or <ion-nav>.

As a quick fix you could add a scss class that uses $toolbar-md-height or $toolbar-ios-height as a margin-bottom to your standard page’s <ion-content>

@JEricaM I have a little trouble to understand, the ion-footer is not supposed to be dynamic in content, and add in all pages like a buggy cache system. Are you sure you don’t overuse Nginx for example? (if your server use too much cache systems or proxys like nginx, something like a footer in template will repeat).

I don’t know what nginx is. My problem is that if a scroll down all the content, my bottom content is covered by the footer (like in the image), and I don’t understand why… I would like to scroll the entire content, and that the footer don’t overlap anything.

@JEricaM I have no idea of your code, so it’s hard to tell. I’ll ask a few questions to try to understand:

  1. did you use z-depth in css code?
  2. did you copy some code you were given like a full Ionic template?
  3. where is your code running? where do you see bottom overlapping in your app? (ionic serve? other?).

Hope it will help,

I solved removing my footer from app.html, adding eat to each page. Less professional, but it works.

1 Like

There seems to be a CSS class to help with the header: class=“has-header” but couldn’t find any docs, or an alternative to footer. So you can style the ion-content with a margin, also not the best solution but helps. eg:

Puede usar en app.scss.

ion-content > .scroll-content{
  margin-bottom: 56px;
}
1 Like

thank you for the answer but I solved long time ago :slight_smile:

Padding works a bit better in this situation

ion-content > .scroll-content{
    padding-bottom: 56px;
  }
1 Like

this.content.resize() is best solution.

4 Likes

I hope you already solved your problem. In case you didn`t solve it or someone else need to know the correct answer.

<ion-footer> must be placed wrapped with the <ion-toolbar> tag.

https://ionicframework.com/docs/api/footer/