CODEWITHSUNDEEP
angulartypescriptionic2ionic3
Khaled Ramadan
Khaled Ramadan

Reputation: 832

It possible to get the height of the ion-footer?

I'm trying to get the initial window height minus the ion-footer height. I succeeded but getting the window height still I have the footer height. It possible the get the height of the ion-footer ionic2 element?

I don't need to get the ion-content height

<ion-footer>
  <button type="submit" form="loginForm" ion-button block class="rnb-button" [disabled]="!loginForm.valid">Log In</button>
</ion-footer>

TS

this.gridHeight = window.innerHeight;

What I need 

this.gridHeight = window.innerHeight - footerHeight;

thanks.

Upvotes: 0

Views: 2741

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

Yes, you can use the reference to the content to get the height of the footer using the contentBottom property:

contentBottom: A number representing how many pixels the bottom of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the footer.

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  ionViewDidEnter() {
    if(this.content) {
      console.log(`Footer height: ${this.content.contentBottom}`);
    }
  }
}

EDIT:

This is just a recommendation but instead of using window.innerHeight you should use the platform to get that information because:

Behind the scenes the platform uses the window.innerWidth and window.innerHeight but using this method is preferred since the dimension is a cached value, which reduces the chance of multiple and expensive DOM reads.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({...})
export MyApp {
  constructor(platform: Platform) {
    platform.ready().then((readySource) => {
      console.log('Width: ' + platform.width());
      console.log('Height: ' + platform.height());
    });
  }
}

Upvotes: 3

Related Questions