Skip to content

Commit 06086ee

Browse files
adamdbradleyadamdbradley
committed
fix(header): buttons do not align in Android 4.4
Closes #1614
1 parent 64641b1 commit 06086ee

File tree

2 files changed

+27
-79
lines changed

2 files changed

+27
-79
lines changed

‎scss/_bar.scss

+4
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,10 @@
237237
.buttons.right-buttons {
238238
display: inherit;
239239
}
240+
.buttons span {
241+
display: inline-flex;
242+
}
243+
240244
// Place the last button in a bar on the right of the bar
241245
.title + .button:last-child,
242246
> .button + .button:last-child,

‎test/css/headers.html

+23-79
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ <h1 class="title">Really really really really really really really really long t
3535
</a>
3636
</div>
3737

38-
<header class="bar bar-header bar-positive">
38+
<header class="bar bar-header bar-light">
3939
<a class="button icon ion-navicon"> Home</a>
4040
<div class="button-bar">
41-
<a class="button button-calm">First</a>
41+
<a class="button button-positive">First</a>
4242
<a class="button">Second</a>
4343
<a class="button">Third</a>
4444
</div>
@@ -47,22 +47,10 @@ <h1 class="title">Really really really really really really really really long t
4747
</a>
4848
</header>
4949

50-
<header class="bar bar-header bar-royal">
51-
<a class="button button-clear icon ion-ios7-alarm"> Back</a>
52-
<div class="button-bar">
53-
<a class="button button-calm">First</a>
54-
<a class="button">Second</a>
55-
<a class="button">Third</a>
56-
</div>
57-
<a class="button">
58-
<i class="icon ion-star"></i> Favorites
59-
</a>
60-
</header>
61-
62-
<header class="bar bar-header bar-positive">
50+
<header class="bar bar-header bar-stable">
6351
<a class="button button-clear icon ion-ios7-arrow-back"> Back</a>
6452
<div class="button-bar">
65-
<a class="button button-calm">First</a>
53+
<a class="button button-dark">First</a>
6654
<a class="button">Second</a>
6755
<a class="button">Third</a>
6856
</div>
@@ -71,7 +59,7 @@ <h1 class="title">Really really really really really really really really long t
7159
</a>
7260
</header>
7361

74-
<div class="bar bar-header bar-calm">
62+
<div class="bar bar-header bar-positive">
7563
<a class="button button-icon icon ion-home"></a>
7664
<div class="button-bar">
7765
<a href="#" class="button button-clear">Edit</a>
@@ -83,30 +71,6 @@ <h1 class="title">Really really really really really really really really long t
8371
</a>
8472
</div>
8573

86-
<header class="bar bar-dark">
87-
<a class="button icon ion-home"></a>
88-
<div class="button-bar">
89-
<a class="button">First</a>
90-
<a class="button">Second</a>
91-
<a class="button">Third</a>
92-
</div>
93-
<a class="button">
94-
<i class="icon ion-star"></i>
95-
</a>
96-
</header>
97-
98-
<header class="bar bar-positive">
99-
<a class="button icon ion-home"></a>
100-
<div class="button-bar">
101-
<a class="button">First</a>
102-
<a class="button">Second</a>
103-
<a class="button">Third</a>
104-
</div>
105-
<a class="button">
106-
<i class="icon ion-star"></i>
107-
</a>
108-
</header>
109-
11074
<header class="bar bar-calm">
11175
<a class="button icon ion-home"></a>
11276
<div class="button-bar">
@@ -132,42 +96,6 @@ <h1 class="title">Really really really really really really really really long t
13296
</header>
13397

13498
<header class="bar bar-balanced">
135-
<a class="button icon ion-home"></a>
136-
<div class="button-bar">
137-
<a class="button">First</a>
138-
<a class="button">Second</a>
139-
<a class="button">Third</a>
140-
</div>
141-
<a class="button">
142-
<i class="icon ion-star"></i>
143-
</a>
144-
</header>
145-
146-
<header class="bar bar-energized">
147-
<a class="button icon ion-home"></a>
148-
<div class="button-bar">
149-
<a class="button">First</a>
150-
<a class="button">Second</a>
151-
<a class="button">Third</a>
152-
</div>
153-
<a class="button">
154-
<i class="icon ion-star"></i>
155-
</a>
156-
</header>
157-
158-
<header class="bar bar-royal">
159-
<a class="button icon ion-home"></a>
160-
<div class="button-bar">
161-
<a class="button">First</a>
162-
<a class="button">Second</a>
163-
<a class="button">Third</a>
164-
</div>
165-
<a class="button">
166-
<i class="icon ion-star"></i>
167-
</a>
168-
</header>
169-
170-
<header class="bar bar-light">
17199
<a class="button icon ion-arrow-left-c"></a>
172100
<div class="button-bar">
173101
<a class="button">First</a>
@@ -179,7 +107,7 @@ <h1 class="title">Really really really really really really really really long t
179107
</a>
180108
</header>
181109

182-
<header class="bar bar-assertive">
110+
<header class="bar bar-energized">
183111
<a class="button button-icon icon ion-arrow-left-c"></a>
184112
<div class="button-bar">
185113
<a class="button">First</a>
@@ -191,11 +119,27 @@ <h1 class="title">Really really really really really really really really long t
191119
</a>
192120
</header>
193121

194-
<header class="bar bar-header bar-stable">
122+
<header class="bar bar-header bar-royal">
195123
<button class="button button-clear button-icon ion-ios7-arrow-back"> Back</button>
196124
<h1 class="title">Title here</h1>
197125
</header>
198126

127+
<header class="bar bar-header bar-dark nav-bar nav-title-slide-ios7">
128+
<div class="buttons left-buttons">
129+
<span>
130+
<button class="button button-icon ion-ios7-world-outline"></button>
131+
<button class="button button-icon ion-ios7-world-outline"></button>
132+
</span>
133+
</div>
134+
<h1 class="title">Two Buttons</h1>
135+
<div class="buttons right-buttons">
136+
<span>
137+
<button class="button button-icon ion-ios7-world-outline"></button>
138+
<button class="button button-icon ion-ios7-world-outline"></button>
139+
</span>
140+
</div>
141+
</header>
142+
199143
</ion-content>
200144

201145
</body>

0 commit comments

Comments
 (0)