Header bar title not aligning properly


#1

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>

#2

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.


#3

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.