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

ionic-team · Jun 27, 2016 · 4567de2 · 4567de2
1 parent 90d0d33
commit 4567de2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/content/content.ts b/src/components/content/content.ts
@@ -530,14 +530,14 @@ export class Content extends Ion {
       newVal = this._footerHeight + this._paddingBottom;
       if (this._tabbarPlacement === 'bottom') {
         newVal += this._tabbarHeight;
+
+        if (newVal > 0 && this._footerEle) {
+          this._footerEle.style.bottom = (newVal - this._footerHeight - this._paddingBottom) + 'px';
+        }
       }
       if (newVal !== this.adjustedBottom) {
         scrollEle.style.paddingBottom = (newVal > 0 ? newVal + 'px' : '');
         this.adjustedBottom = newVal;
-
-        if (newVal > 0 && this._footerEle) {
-          this._footerEle.style.bottom = (newVal - this._footerHeight) + 'px';
-        }
       }
 
     } else {

diff --git a/src/components/content/test/basic/page2.html b/src/components/content/test/basic/page2.html
@@ -28,6 +28,9 @@
   <ion-toolbar class="opaque">
     <ion-title>Footer</ion-title>
   </ion-toolbar>
+  <ion-toolbar class="opaque">
+    <ion-title>Footer 2</ion-title>
+  </ion-toolbar>
 </ion-footer>
 
 <style>

diff --git a/src/components/content/test/fullscreen/page2.html b/src/components/content/test/fullscreen/page2.html
@@ -28,6 +28,9 @@
   <ion-toolbar class="opaque">
     <ion-title>Footer</ion-title>
   </ion-toolbar>
+  <ion-toolbar class="opaque">
+    <ion-title>Footer 2</ion-title>
+  </ion-toolbar>
 </ion-footer>
 
 <style>