Footer hiding content

Ionic Framework ionic-v3
1

I have a page with the following basic structure:

<ion-header>
    <ion-navbar></ion-navbar>
</ion-header>
<ion-content has-bouncing="true"></ion-content>
<ion-footer>
    <ion-toolbar></ion-toolbar>
</ion-footer>

However, the footer is hiding the bottom part of the content, and it cannot be scrolled. I could fix this in Chrome dev tools by setting a margin-bottom of the scroll-content div equal to the height of the footer, but I don’t know how to set it conditionally (as we don’t always show the footer).

Anyone knows how to fix this?

1 Like
2

Your structure is correct and works fine for me. What Beta/RC version of Ionic are you using?

3

@dndr If your header or your footer has a toolbar that is shown dynamically (and maybe in other cases) you need to resize the content to update its size according to the new size of the header and the footer (because they are fixed in the screen).

I don’t know if this is your case, but you can give a try:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
	selector: 'my-page',
	template: `
		<ion-header>
			<ion-navbar color="primary"></ion-navbar>
		</ion-header>
		<ion-content has-bouncing="true">
			<span *ngFor="let item of items">
				{{ item }}<br>
			</span>
		</ion-content>
		<ion-footer *ngIf="showFooter">
			<ion-toolbar color="primary"></ion-toolbar>
		</ion-footer>
	`
})
export class MyPage implements OnInit {
	@ViewChild(Content) content: Content;
	public showFooter = false;
	public items = [];

	ngOnInit() {
		for (let i = 1; i <= 50; i++) {
			this.items.push('Item ' + i);
		}

		setTimeout(() => {
			this.showFooter = true;

			setTimeout(() => {
				this.content.resize();
			}, 3000);
		}, 3000);
	}
}

In the example, after 3 seconds the footer is shown, but it will hide part of the content. Then, after 3 seconds (6 seconds from the beginning), the content is resized and all the content is visible.

(The @ViewChild must be in the page component, that is, the one that has the ion-content tag.)

So, you just need to call resize right after you make changes that can affect the size of the header or footer.

7 Likes
4

I second with above answer. When ever you and dynamically adding component to your view and fixed content is hiding your content: this means the ion-content need to be resize. That’s because ion-content is also fixed size.

Content.resize() is the way to go.