From d00aaa59455fdd6b4e34ac4547e86e1049734954 Mon Sep 17 00:00:00 2001 From: Andy Joslin Date: Tue, 8 Apr 2014 13:21:03 -0600 Subject: [PATCH] fix(ionHeaderBar): make it align after elements properly load Addresses #945. --- js/views/headerBarView.js | 57 ++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/js/views/headerBarView.js b/js/views/headerBarView.js index 5d03b88e37f..93d35033253 100644 --- a/js/views/headerBarView.js +++ b/js/views/headerBarView.js @@ -22,39 +22,40 @@ return; } - var i, c, childSize; - var childNodes = this.el.childNodes; - var leftWidth = 0; - var rightWidth = 0; - var isCountingRightWidth = false; + var self = this; + //We have to rAF here so all of the elements have time to initialize + ionic.requestAnimationFrame(function() { + var i, c, childSize; + var childNodes = self.el.childNodes; + var leftWidth = 0; + var rightWidth = 0; + var isCountingRightWidth = false; - // Compute how wide the left children are - // Skip all titles (there may still be two titles, one leaving the dom) - // Once we encounter a titleEl, realize we are now counting the right-buttons, not left - for(i = 0; i < childNodes.length; i++) { - c = childNodes[i]; - if (c.tagName && c.tagName.toLowerCase() == 'h1') { - isCountingRightWidth = true; - continue; - } + // Compute how wide the left children are + // Skip all titles (there may still be two titles, one leaving the dom) + // Once we encounter a titleEl, realize we are now counting the right-buttons, not left + for(i = 0; i < childNodes.length; i++) { + c = childNodes[i]; + if (c.tagName && c.tagName.toLowerCase() == 'h1') { + isCountingRightWidth = true; + continue; + } - childSize = null; - if(c.nodeType == 3) { - childSize = ionic.DomUtil.getTextBounds(c); - } else if(c.nodeType == 1) { - childSize = c.getBoundingClientRect(); - } - if(childSize) { - if (isCountingRightWidth) { - rightWidth += childSize.width; - } else { - leftWidth += childSize.width; + childSize = null; + if(c.nodeType == 3) { + childSize = ionic.DomUtil.getTextBounds(c).width; + } else if(c.nodeType == 1) { + childSize = c.offsetWidth; + } + if(childSize) { + if (isCountingRightWidth) { + rightWidth += childSize; + } else { + leftWidth += childSize; + } } } - } - var self = this; - ionic.requestAnimationFrame(function() { var margin = Math.max(leftWidth, rightWidth) + 10; // Size and align the header titleEl based on the sizes of the left and