Disappearing ion-nav-bar

ionic-v1
1

Trying to start a new app via the blank template.

Added two routes:

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home',
        {
            url: '/home',
            templateUrl: 'templates/home.html',
            onEnter: function() { console.log('entering home...') }
        })
        .state('create',
        {
            url: '/create',
            templateUrl: 'templates/create.html',
            onEnter: function() { console.log('entering create...') }
        });
})

And copying from the ion-nav-bar docs, I changed the body contents of index.html to this:

<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right">

</ion-nav-view>

I can see that I am entering routes via the console.log statements, and I can see the content changing, but I have no nav bar at all. And the content is rendering at the very top left corner, both in a browser and in the emulator. The nav bar seems to be picking up a style attribute of “invisible” from somewhere. I am not applying ANY user styles at all. It is literally a fresh copy of the blank seed, save for the added routes. Especially weird in the emulator, since it’s rendering OVER the status bar. Here’s a screenshot:

dDvG05r.png792×1488

So yeah. I’ve done BIG projects before in ionic and I can’t for the life of me figure out what’s wrong here.

Help?

2

Did you check your console for errors? Looks like something is crashing the angular portion of your app.

3

I get no error aside from the 404 for cordova.js. (expected)

Like I said - the app works. Angular is working, since I can change the routes and see the messages. But the nav-bar somehow gets a style of “invisible” applied. You can see it in the computed styles in Chrome.

4

I managed to sort this out after some very careful picking through the docs.

Thanks.

5

Do you mind sharing how you were able to resolve this?

6

Because I ran into this same issue and current responses to this post useless here is a solution I found.

ion-nav-bar {
    visibility: visible !important;
    display: block !important;
}

Not ideal but it fixed the problem.