Ion-header-bar class not applied

ionic-v1
1

Hi, I’m trying to make some tests to learn creating mobile apps.

I can’t a make simple header with too test input.

here is my code:

<body>
  <div class="modal">
     <ion-header-bar class="bar-positive">
       <div class="buttons">
              <button class="button" ng-click="doSomething()">Left Button</button>
          </div>
          <h1 class="title">Name</h1>
          <div class="buttons">
              <button class="button">Right Button</button>
          </div>
        </ion-header-bar>
        <ion-content>
            <div class="list">
                <label class="item item-input">
                    <input type="text" placeholder="First Name">
                </label>
                <label class="item item-input">
                    <input type="text" placeholder="Last Name">
                </label>
            </div>
        </ion-content>
    </div>
  </body>

bar-positive is only applied on buttons in header, but not on the whole header.

if i use <ion-header-bar class="bar bar-positive">, header looks normal but ion-content goes under him.

Is there something I don’t understant ?

Thanks for help.

2

Those buttons should be defined as nav-buttons. Your header should look like this:

<ion-header-bar class="bar-positive">
<ion-nav-buttons side="left">
    <button class="button" ng-click="doSomething()">Left Button</button>
</ion-nav-buttons>
          <h1 class="title">Name</h1>
          <ion-nav-buttons side="right">
    <button class="button">right Button</button>
</ion-nav-buttons>
        </ion-header-bar>

Then for the content not to go under the header, add a class “has-header” to the :

<ion-content class="has-header">
3

Thanks for answer, but still not work. I give yout new code.

        <ion-header-bar class="bar-positive">
            <ion-nav-buttons side="left">
                <button class="button" ng-click="doSomething()">Left Button</button>
            </ion-nav-buttons>
            <h1 class="title">Name</h1>
            <ion-nav-buttons side="right">
                <button class="button">right Button</button>
            </ion-nav-buttons>
        </ion-header-bar>
        <ion-content class="has-header">
            <div class="list">
                <label class="item item-input">
                    <input type="text" placeholder="First Name">
                </label>
                <label class="item item-input">
                    <input type="text" placeholder="Last Name">
                </label>
            </div>
        </ion-content>

here is what i get,

Do you see why ?

4

Try access it via your browser. Or a little modification here:

<ion-view title="Name">
    <ion-header-bar class="bar-positive">
        <ion-nav-buttons side="left">
            <button class="button" ng-click="doSomething()">Left Button</button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button class="button">right Button</button>
        </ion-nav-buttons>
    </ion-header-bar>
    <ion-content class="has-header">
        <div class="list">
            <label class="item item-input">
                <input type="text" placeholder="First Name">
            </label>
            <label class="item item-input">
                <input type="text" placeholder="Last Name">
            </label>
        </div>
    </ion-content>
</ion-view>
5

Thanks again, but still not ok, ion-view is not bar-positive, and don’t display title (name), even on my nexus 5.

My ionic version is 1.2.5, maybe i should take earlier version ?

Or coul’d i have miss some trick in installation ?

6

My bad, continuing project and adding ionic as a module dependency solved it.

7

Actually title is set in the : <ion-view title="whatever">...