CODEWITHSUNDEEP
htmlcssangularjsionic-framework
Kanav
Kanav

Reputation: 2819

ion-nav-bar not displaying anything

I created a navigation bar using ionic-nav-bar. Added an h1 element with class title. But it's not displaying anything.

Here's my code

<ion-pane>
    <ion-nav-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-nav-bar>
    <ion-content>
    </ion-content>
</ion-pane>

However, this is working:

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
    </ion-content>
</ion-pane>

So what am i doing wrong?

Upvotes: 1

Views: 6167

Answers (4)

Amer Diglisic
Amer Diglisic

Reputation: 91

The fact is that your

<h1>Test</h1>

tag is displayed but it is placed behind your <ion-nav-bar></ion-nav-bar>. As Anand suggested in answer above you should use <ion-nav-title>Test</ion-nav-title> to get expected result.

Hope this helps.

Upvotes: 0

Anand
Anand

Reputation: 610

 <ion-nav-bar class="bar-positive">
 <ion-nav-title>hello</ion-nav-title>
 </ion-nav-bar>

This Will solve your problem.

Upvotes: 24

KickerKeeper
KickerKeeper

Reputation: 265

The ion-nav-bar will be your navigation bar and you will have ion-views that will be plugged into the ion-content section. You would never want one title if you have a nav bar because the title should change as you navigate across ion-views. When you create you ion-view tag add a view-title attribute. Then when that view is active it will automatically update the header no h1 tag required.

The ion-header approach works because ion-header is designed to be a static and not dynamically update like a navigation header would.

Upvotes: 0

Sebastian
Sebastian

Reputation: 1654

That would be the html file of your view:

<ion-view title='My Title' class="dashboard"> 
    <ion-content>
    </ion-content>
</ion-view>

In your case you should wrap all that in an other ion-nav-view-element, because you are using the ion-nav-bar-element.

Upvotes: 0

Related Questions