CODEWITHSUNDEEP
htmlcssionic-framework
Caleb Faruki
Caleb Faruki

Reputation: 2725

Fixing title alignment in header for ionic project

I have an abstract template with and left and right side menu. For the header on the ion-side-menu-content tag, I need to have 3 lines of text.

But for a reason I can't yet identify, when I try to apply the title class to the text, it is either hidden from view, or it sticks to the left, displacing the left-aligned button I have.

<ion-side-menus>
  <ion-side-menu-content>

    <ion-nav-bar class="bar-stable">
      <p>Ac vestibulum scelerisque<br />vel porta a parturient</p>
    </ion-nav-bar>

    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
      </button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
      <button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
      </button>
    </ion-nav-buttons>
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <div class="bar bar-header">
      <p>Velit tristique fusce nisi parturient</p>
    </div>
    <ion-content has-header="true">
      <ul class="list">
        <li class="item">item 1</li>
      </ul>
    </ion-content>
    <ion-footer-bar class="bar bar-footer">
        <p>footer content here</p>
    </ion-footer-bar>
  </ion-side-menu>

  <ion-side-menu side="right">
    <ion-header-bar class="bar bar-header">
      <p>A condimentum metus varius eu ultrices</p>
    </ion-header-bar>
    <ion-content>
      <ul class="list">
        <li class="item">item 1</li>
      </ul>
    </ion-content>
    <ion-footer-bar class="bar bar-footer">
        <p>footer content here</p>
    </ion-footer-bar>
  </ion-side-menu>

</ion-side-menus>

Without class="title"

Without class="title"

With class="title"

With class="title"

What do I need to change in order to make the left button stick to the left, and center the title content in the header bar?

Upvotes: 0

Views: 9600

Answers (1)

Caleb Faruki
Caleb Faruki

Reputation: 2725

http://ionicframework.com/blog/navigating-the-changes/

After some reading, I found that the source of my troubles was actually an DOM structure issue.

<ion-nav-bar> must be the parent tag to <h1> as well as the <ion-nav-button> tags.

<h1> will, by default be rendered as the title in the header bar. And only line will be shown. If you do not use <h1>, the content you've intended to be the header title will be hidden from the viewport. Presumably, the solution to this is to just use the <h1> tag as was intended by the Ionic devs, and use CSS overrides to force the display of multiple lines.

Your HTML should look like this:

<ion-nav-bar class="bar-stable">
  <h1 class="title">Ac vestibulum scelerisque<br />vel porta a parturient</h1>

  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="showLeftMenu()">
    </button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
    </button>
  </ion-nav-buttons>
</ion-nav-bar>

Upvotes: 1

Related Questions