Skip to content

Commit 9c5772f

Browse files
adamdbradleyadamdbradley
committed
fix(footer): Show footers within tab content, closes #728 
1 parent 181269a commit 9c5772f

File tree

3 files changed

+171
-39
lines changed

3 files changed

+171
-39
lines changed

‎scss/_scaffolding.scss

+7-3
Original file line numberDiff line numberDiff line change
@@ -275,9 +275,13 @@ ion-infinite-scroll.active .scroll-infinite {
275275
bottom: $bar-height;
276276
}
277277

278-
// Specify that a content area will have tabs
279-
.has-tabs {
280-
bottom: 49px;
278+
.has-tabs,
279+
.bar-footer.has-tabs {
280+
bottom: $tabs-height;
281+
}
282+
283+
.has-footer.has-tabs {
284+
bottom: $tabs-height + $bar-height;
281285
}
282286

283287
// A full screen section with a solid background

‎test/html/footers.html

+58-36
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
<title>Footers</title>
55
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
66
<link href="../../dist/css/ionic.css" rel="stylesheet">
7-
<style>
8-
.hide{display:none;}
9-
</style>
107
</head>
118
<body>
129

@@ -17,43 +14,68 @@ <h1 class="title">Footer</h1>
1714
<main class="content padding has-header has-footer">
1815
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
1916
<p>Content element must have "has-footer" as a classname.</p>
20-
<p><button id="btnAddMore">Dynamically Add More Content</button></p>
21-
<div id="add-more"></div>
22-
<p><button id="btnToggle">Toggle Content</button></p>
23-
<p id="toggle-content" class="hide">
24-
Toggled content<br>
25-
Toggled content<br>
26-
Toggled content<br>
27-
Toggled content<br>
28-
Toggled content<br>
29-
Toggled content<br>
30-
Toggled content<br>
31-
Toggled content<br>
32-
Toggled content<br>
33-
Toggled content<br>
34-
Toggled content<br>
35-
Toggled content<br>
36-
Toggled content<br>
37-
Toggled content<br>
38-
Toggled content<br>
39-
Toggled content<br>
40-
Toggled content<br>
41-
Toggled content<br>
42-
Toggled content<br>
43-
Toggled content<br>
44-
Toggled content<br>
45-
Toggled content<br>
46-
Toggled content<br>
47-
Toggled content<br>
48-
Toggled content<br>
49-
Toggled content<br>
50-
Toggled content<br>
51-
Toggled content<br>
17+
<p>
18+
Content<br>
19+
Content<br>
20+
Content<br>
21+
Content<br>
22+
Content<br>
23+
Content<br>
24+
Content<br>
25+
Content<br>
26+
Content<br>
27+
Content<br>
28+
Content<br>
29+
Content<br>
30+
Content<br>
31+
Content<br>
32+
Content<br>
33+
Content<br>
34+
Content<br>
35+
Content<br>
36+
Content<br>
37+
Content<br>
38+
Content<br>
39+
Content<br>
40+
Content<br>
41+
Content<br>
42+
Content<br>
43+
Content<br>
44+
Content<br>
45+
Content<br>
46+
Content<br>
47+
Content<br>
48+
Content<br>
49+
Content<br>
50+
Content<br>
51+
Content<br>
52+
Content<br>
53+
Content<br>
54+
Content<br>
55+
Content<br>
56+
Content<br>
57+
Content<br>
58+
Content<br>
59+
Content<br>
60+
Content<br>
61+
Content<br>
62+
Content<br>
63+
Content<br>
64+
Content<br>
65+
Content<br>
66+
Content<br>
67+
Content<br>
68+
Content<br>
69+
Content<br>
70+
Content<br>
71+
Content<br>
72+
Content<br>
73+
Content<br>
5274
</p>
5375
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
5476
</main>
5577

56-
<footer class="bar bar-footer bar-default">
78+
<footer class="bar bar-footer bar-positive">
5779
<h3 class="title">Footer</h3>
5880
</footer>
5981

‎test/html/tab-with-footer.html

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Tab with a Footer</title>
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
6+
<link href="../../dist/css/ionic.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
10+
<header class="bar bar-header bar-dark">
11+
<h1 class="title">Tab with a Footer</h1>
12+
</header>
13+
14+
<main class="content padding has-header has-footer has-tabs">
15+
<p>Example of a tab that also has a footer inside of it</p>
16+
<p>
17+
Content<br>
18+
Content<br>
19+
Content<br>
20+
Content<br>
21+
Content<br>
22+
Content<br>
23+
Content<br>
24+
Content<br>
25+
Content<br>
26+
Content<br>
27+
Content<br>
28+
Content<br>
29+
Content<br>
30+
Content<br>
31+
Content<br>
32+
Content<br>
33+
Content<br>
34+
Content<br>
35+
Content<br>
36+
Content<br>
37+
Content<br>
38+
Content<br>
39+
Content<br>
40+
Content<br>
41+
Content<br>
42+
Content<br>
43+
Content<br>
44+
Content<br>
45+
Content<br>
46+
Content<br>
47+
Content<br>
48+
Content<br>
49+
Content<br>
50+
Content<br>
51+
Content<br>
52+
Content<br>
53+
Content<br>
54+
Content<br>
55+
Content<br>
56+
Content<br>
57+
Content<br>
58+
Content<br>
59+
Content<br>
60+
Content<br>
61+
Content<br>
62+
Content<br>
63+
Content<br>
64+
Content<br>
65+
Content<br>
66+
Content<br>
67+
Content<br>
68+
Content<br>
69+
Content<br>
70+
Content<br>
71+
Content<br>
72+
Content<br>
73+
</p>
74+
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
75+
</main>
76+
77+
<footer class="bar bar-footer bar-stable has-tabs">
78+
<h3 class="title">Footer</h3>
79+
</footer>
80+
81+
<nav class="tabs tabs-icon-bottom tabs-positive">
82+
<a class="tab-item" href="#">
83+
Fun
84+
<i class="icon ion-game-controller-a"></i>
85+
</a>
86+
<a class="tab-item">
87+
Security
88+
<i class="icon ion-locked"></i>
89+
</a>
90+
<a class="tab-item">
91+
Simple
92+
<i class="icon ion-heart"></i>
93+
</a>
94+
<a class="tab-item has-badge">
95+
Light
96+
<i class="badge">3</i>
97+
<i class="icon ion-leaf"></i>
98+
</a>
99+
<a class="tab-item">
100+
Clean
101+
<i class="icon ion-waterdrop"></i>
102+
</a>
103+
</nav>
104+
105+
</body>
106+
</html>

0 commit comments

Comments
 (0)