Ion Footer overlap content

#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.

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.

2 Likes