indiana jones and the toolbar crusade

ionic/components/app/structure.scss

@@ -36,6 +36,7 @@ ion-nav {
 
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .toolbar-container {

ionic/components/nav/nav-item.js

@@ -125,6 +125,21 @@ export class NavItem {
     return this._titleEle;
   }
 
+  getBackButton() {
+    if (this._backBtn === undefined) {
+      let toolbarElements = this.getToolbars();
+      for (let i = 0; i < toolbarElements.length; i++) {
+        var backBtn = toolbarElements[i].querySelector('back-button');
+        if (backBtn) {
+          this._backBtn = backBtn;
+          return this._backBtn;
+        }
+      }
+      this._backBtn = null;
+    }
+    return this._backBtn;
+  }
+
   destroy() {
     for (let i = 0; i < this.disposals.length; i++) {
       this.disposals[i]();

ionic/components/toolbar/extensions/ios.scss

@@ -44,12 +44,9 @@ $toolbar-ios-button-background-color:       transparent !default;
     order: map-get($toolbar-order-ios, 'secondary');
   }
 
-  .toolbar-title {
-    text-align: center;
-  }
-
   ion-title {
     order: map-get($toolbar-order-ios, 'title');
+    text-align: center;
     font-size: $toolbar-ios-title-font-size;
     font-weight: 500;
   }

ionic/components/toolbar/toolbar.js

@@ -49,28 +49,31 @@ export class Toolbar {
   alignTitle() {
     if (!this.domElement) return;
 
-    const toolbarElement = this.domElement;
-    const titleElement = this._titleElement || (this._titleElement = toolbarElement.querySelector('.toolbar-inner-title'));
-    const style = this._style || (this._style = window.getComputedStyle(titleElement));
+    const toolbarEle = this.domElement;
+    const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'));
+    const titleEle = this._titleEle || (this._titleEle = innerTitleEle.querySelector('ion-title'));
+    const style = this._style || (this._style = window.getComputedStyle(titleEle));
 
-    const titleOffsetWidth = titleElement.offsetWidth;
-    const titleOffsetLeft = titleElement.offsetLeft;
-    const titleScrollWidth = titleElement.scrollWidth;
-    const toolbarOffsetWidth = toolbarElement.offsetWidth;
+    const titleOffsetWidth = titleEle.offsetWidth;
+    const titleOffsetLeft = titleEle.offsetLeft;
+    const titleScrollWidth = titleEle.scrollWidth;
+    const toolbarOffsetWidth = toolbarEle.offsetWidth;
 
     // only align if the title is center and if it isn't already overflowing
     if (style.textAlign !== 'center' || titleOffsetWidth < titleScrollWidth) {
       this._showTitle();
+
     } else {
       let rightMargin = toolbarOffsetWidth - (titleOffsetLeft + titleOffsetWidth);
       let centerMargin = titleOffsetLeft - rightMargin;
 
-      titleElement.style.margin = `0 ${centerMargin}px 0 0`;
+      innerTitleEle.style.margin = `0 ${centerMargin}px 0 0`;
 
       dom.raf(() => {
-        if (titleElement.offsetWidth < titleElement.scrollWidth) {
-          this.titleElement.style.margin = '';
-          this.titleElement.style.textAlign = 'left';
+        if (titleEle.offsetWidth < titleEle.scrollWidth) {
+          // not enough room yet, just left align title
+          innerTitleEle.style.margin = '';
+          innerTitleEle.style.textAlign = 'left';
         }
         this._showTitle();
       })
@@ -80,7 +83,7 @@ export class Toolbar {
   _showTitle() {
     if (!this._shown) {
       this._shown = true;
-      this._titleElement.classList.remove('toolbar-title-hide');
+      this._innerTitleEle.classList.remove('toolbar-title-hide');
     }
   }
 

ionic/components/toolbar/toolbar.scss

@@ -59,6 +59,7 @@ ion-toolbar [side="secondary"] {
 
 ion-title {
   display: block;
+  overflow: hidden;
 
   // used to notify JS when the title has been rendered
   animation-duration: 1ms;
@@ -68,7 +69,6 @@ ion-title {
 .toolbar-inner-title {
   width: 100%;
   padding: 0 15px;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }