From 9c5772f3c3aeb41ea10d8484867f4f240f48d953 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sun, 9 Mar 2014 22:29:04 -0500 Subject: [PATCH] fix(footer): Show footers within tab content, closes #728 --- scss/_scaffolding.scss | 10 +++- test/html/footers.html | 94 ++++++++++++++++++----------- test/html/tab-with-footer.html | 106 +++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+), 39 deletions(-) create mode 100644 test/html/tab-with-footer.html diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index e6fe48290ea..3b35ad53265 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -275,9 +275,13 @@ ion-infinite-scroll.active .scroll-infinite { bottom: $bar-height; } -// Specify that a content area will have tabs -.has-tabs { - bottom: 49px; +.has-tabs, +.bar-footer.has-tabs { + bottom: $tabs-height; +} + +.has-footer.has-tabs { + bottom: $tabs-height + $bar-height; } // A full screen section with a solid background diff --git a/test/html/footers.html b/test/html/footers.html index 452a3692082..5374c1d238e 100644 --- a/test/html/footers.html +++ b/test/html/footers.html @@ -4,9 +4,6 @@ Footers - @@ -17,43 +14,68 @@

Footer

Footer should always stay at the bottom of the screen, and on top of the main content.

Content element must have "has-footer" as a classname.

-

-
-

-

- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
- Toggled content
+

+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content
+ Content

All CSS Tests

-