Skip to content

Commit d00aaa5

Browse files
committed
fix(ionHeaderBar): make it align after elements properly load
Addresses #945.
1 parent 6a1ac35 commit d00aaa5

File tree

1 file changed

+29
-28
lines changed

1 file changed

+29
-28
lines changed

js/views/headerBarView.js

+29-28
Original file line numberDiff line numberDiff line change
@@ -22,39 +22,40 @@
2222
return;
2323
}
2424

25-
var i, c, childSize;
26-
var childNodes = this.el.childNodes;
27-
var leftWidth = 0;
28-
var rightWidth = 0;
29-
var isCountingRightWidth = false;
25+
var self = this;
26+
//We have to rAF here so all of the elements have time to initialize
27+
ionic.requestAnimationFrame(function() {
28+
var i, c, childSize;
29+
var childNodes = self.el.childNodes;
30+
var leftWidth = 0;
31+
var rightWidth = 0;
32+
var isCountingRightWidth = false;
3033

31-
// Compute how wide the left children are
32-
// Skip all titles (there may still be two titles, one leaving the dom)
33-
// Once we encounter a titleEl, realize we are now counting the right-buttons, not left
34-
for(i = 0; i < childNodes.length; i++) {
35-
c = childNodes[i];
36-
if (c.tagName && c.tagName.toLowerCase() == 'h1') {
37-
isCountingRightWidth = true;
38-
continue;
39-
}
34+
// Compute how wide the left children are
35+
// Skip all titles (there may still be two titles, one leaving the dom)
36+
// Once we encounter a titleEl, realize we are now counting the right-buttons, not left
37+
for(i = 0; i < childNodes.length; i++) {
38+
c = childNodes[i];
39+
if (c.tagName && c.tagName.toLowerCase() == 'h1') {
40+
isCountingRightWidth = true;
41+
continue;
42+
}
4043

41-
childSize = null;
42-
if(c.nodeType == 3) {
43-
childSize = ionic.DomUtil.getTextBounds(c);
44-
} else if(c.nodeType == 1) {
45-
childSize = c.getBoundingClientRect();
46-
}
47-
if(childSize) {
48-
if (isCountingRightWidth) {
49-
rightWidth += childSize.width;
50-
} else {
51-
leftWidth += childSize.width;
44+
childSize = null;
45+
if(c.nodeType == 3) {
46+
childSize = ionic.DomUtil.getTextBounds(c).width;
47+
} else if(c.nodeType == 1) {
48+
childSize = c.offsetWidth;
49+
}
50+
if(childSize) {
51+
if (isCountingRightWidth) {
52+
rightWidth += childSize;
53+
} else {
54+
leftWidth += childSize;
55+
}
5256
}
5357
}
54-
}
5558

56-
var self = this;
57-
ionic.requestAnimationFrame(function() {
5859
var margin = Math.max(leftWidth, rightWidth) + 10;
5960

6061
// Size and align the header titleEl based on the sizes of the left and

0 commit comments

Comments
 (0)