CODEWITHSUNDEEP
angularjsionic-framework
Alberto López
Alberto López

Reputation: 248

Header with image with ionic framework

I want to create a header using ionic framework.
It will show an image and 2 buttons. The image has to be aligned horizontally to the left and the 2 buttons to the right. The next code show everything, but the image is centered, is it posible to align the image to the left? 

<ion-view title='<img class="title-image" src="img/logo_elizondo_ch.png" />'>
    <ion-nav-buttons side="right" >
      <button class="button" ng-click="doSomething()">
        Right
      </button>
      <button class="button" ng-click="doSomething()" >
        Right 2
      </button>
    </ion-nav-buttons>
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Upvotes: 1

Views: 6346

Answers (2)

divyenduz
divyenduz

Reputation: 2027

You will have a parent for this view ? Namely, a abstract state in app.js file (assuming that you are using of the ionic starters).

That abstract state would have a templateUrl attribute.

Inside that template html file, you will have a directive to alter the header alignment. You can set it's align-title property.

<ion-nav-header align-title="left"></ion-nav-header>

Ofcourse, this answer is based on many assumptions. If you share a codepen of your code, or explain more in detail, that would be better.

UPDATE: The above is one of the better solutions. Another solution would be to use ionNavTitle directive.

Upvotes: 1

Ben Diamant
Ben Diamant

Reputation: 6206

use css position absolute

.title-image {
    position: absolute;
    left: 0px:
}

Upvotes: 0

Related Questions