Ion Footer overlap content

Ionic Framework ionic-v3
1

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.

Senza titolo 1
Senza titolo 1.jpg714×594 285 KB

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.

2

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

3

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

4

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?

5

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>

6

@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).

7

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.

8

@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,

10

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

1 Like
11

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:

12

Puede usar en app.scss.

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

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

14

Padding works a bit better in this situation

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

this.content.resize() is best solution.

4 Likes
17

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/