javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(content): adjust footer bottom based on the tabbar without padding

Browse Source
This commit is contained in:
Brandy Carney
2016-06-27 12:13:26 -04:00
parent 90d0d33270
commit 4567de2aea
3 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/content/content.ts
View File

@ -530,14 +530,14 @@ export class Content extends Ion {
newVal = this._footerHeight + this._paddingBottom; newVal = this._footerHeight + this._paddingBottom;
if (this._tabbarPlacement === 'bottom') { if (this._tabbarPlacement === 'bottom') {
newVal += this._tabbarHeight; newVal += this._tabbarHeight;
if (newVal > 0 && this._footerEle) {
this._footerEle.style.bottom = (newVal - this._footerHeight - this._paddingBottom) + 'px';
}
} }
if (newVal !== this.adjustedBottom) { if (newVal !== this.adjustedBottom) {
scrollEle.style.paddingBottom = (newVal > 0 ? newVal + 'px' : ''); scrollEle.style.paddingBottom = (newVal > 0 ? newVal + 'px' : '');
this.adjustedBottom = newVal; this.adjustedBottom = newVal;
if (newVal > 0 && this._footerEle) {
this._footerEle.style.bottom = (newVal - this._footerHeight) + 'px';
}
} }
} else { } else {

3
src/components/content/test/basic/page2.html
View File

@ -28,6 +28,9 @@
<ion-toolbar class="opaque"> <ion-toolbar class="opaque">
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar class="opaque">
<ion-title>Footer 2</ion-title>
</ion-toolbar>
</ion-footer> </ion-footer>
<style> <style>

3
src/components/content/test/fullscreen/page2.html
View File

@ -28,6 +28,9 @@
<ion-toolbar class="opaque"> <ion-toolbar class="opaque">
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar class="opaque">
<ion-title>Footer 2</ion-title>
</ion-toolbar>
</ion-footer> </ion-footer>
<style> <style>