I’m setting up a new app and added header bars to my screens, but the align-title property doesn’t seem to have any effect. I tried updating to the latest version of ionic, but it did not solve the problem and caused a subheader with input to disappear. Is there anything I’m missing? This is rendered in a div containing a view set by Angular routing.
<ion-header-bar align-title="left" class="bar-dark" >
<h1 class="title">Leads</h1>
</ion-header-bar>
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="filterInput" placeholder="Filter">
</label>
</ion-header-bar>
<ion-content has-header="true">
...
</ion-content>
Works fine for me:
http://imgur.com/TjwZjD1
With this code:
<ion-view>
<ion-header-bar align-title="left" class="bar-dark" title="Leads">
<h1 class="title">Leads</h1>
</ion-header-bar>
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="filterInput" placeholder="Filter">
</label>
</ion-header-bar>
<ion-content has-header="true">
...
</ion-content>
This is all inside of an ion-nav-view and using Ionic v1.0.0-beta.6-nightly-2187.
After digging through some css, I manually added a text-align:left
style to the title element, which fixes it. I had my views loaded in a div through $routeProvider and ng-view, I didn’t use the nav-view components and states.