Ion-nav-bar invisible inside modal

My main app UI uses ion-nav-bar, ion-nav-back-button, etc for navigation successfully.
I also have a modal which contains a nested view, another ion-nab-bar, etc. All of my nested states/views/navigation inside this modal work exactly as they should. The only problem is that the nav-bar is hidden (invisible class gets applied somehow).

Markup is like this for the modal:

    <ion-nav-bar class="bar-dark nav-title-slide-ios7" >
        <ion-nav-back-button class="button-clear">
            <i class="ion-chevron-left"></i> <span style="text-transform:capitalize;">{{backTitle}}</span>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="navable-modal">
    </ion-nav-view>
</div>```

And like this for a view:
```

This is the same markup/pattern I’m using successfully in the main UI.
Anyone have any idea why the ion-nav-bar inside the modal is being set to invisible?

2 Likes

did you find anything? i am having the same problem

I haven’t had time to dig into it myself yet, but I did open an issue a few days ago:

Having looked into it a little more, I found that by assigning the modal’s ion-nav-bar a handle in the markup, you can then force it to be displayed, change text, etc via $ionicNavBarDelegate.
What’s odd is that I didn’t need to do this before sometime around 1.0.beta6. Also, in this scenario the nav-bar will not honor the title attribute of the ion-view it is currently displaying, I have to explicitly set the text, show/hide the back button, etc. Not ideal, but workable.

Can you explain how did you make it work please? The part involving the nested views and the navigation between them. I’m facing the same issue and have no clue what to do. @mbuster

The best way to understand nested views is to read the ui-router docs. Basically, you will have named views, and you will declare states with templates for each named view.
Here’s a code pen from @mhartington that illustrates it.
Past that, you may want to start a new thread for your question.

Can you provide a codepen of what you have worked up so far?

With it broken or with the workaround?

Lets do both, so that way I can see the whole picture.

I think the big issue I’m having is understand why there is navigation in a modal.

A number of popular apps use navigation stacks inside modals. My use case is very similar to this screen shot of the Nest thermostat settings modal, which contains a navigable hierarchy of list views for settings/preferences.

There are a number of other use-cases, such as sign-in/registration modals, walkthroughs, help topics/guides, etc where a working navbar would be useful inside a modal to display hierarchal information.

All that being said, I’ll put together a code pen to illustrate.

1 Like

Here’s a pen with navigation “working” inside the modal, but with the ion-nav-bar not visible. If you manually remove the ‘invisible’ tag from the nag-bar in the inspector, it will appear, but not display the title, show the back button, etc.

codepen

I think this is a great idea. Currently working on a project that would could use the ability to do this.

The issue mbuster posted was marked as closed and moved to the forum, but I don’t see any actual resolution to the issue. This is not as uncommon as seems to be suggested. Another example app that has a settings modal with navigation is the streaks app (https://sensortower.com/ios/us/fanzter-inc/app/streaks-motivational-calendar/345184462)

Indeed. It was closed, but not resolved.

use ion-header-bar instead of ion-nav-bar it will solve your problem

Yes, this displays a header bar, but does not provide the nav-bar functionality which is the point of the exercise.

Yep. It doesn’t address the actual problem.

Couple more apps that use nested navigation in a modal:

Kindle

Overcast

Facebook’s Messenger app have navigation in a modal.

Just press on the “start new conversation” button on top-left of the side pane, then “Gruppo” (Groups) and you’ll see the navigation transition happening.

(Recorded from iPhone 6 Plus)

It somehow works if you change title e.g. with the $ionicNavBarDelegate. But besides being impracticle the nav bar title animation do not work.
A fix would be useful.

Hey @mhartington - can you provide some feedback on these follow up questions and feedback?

Primarily, I think it’d be good to get an official stance on this issue. Is it something that you’re talking about internally? Will it be addressed eventually? Or is it something the Ionic team isn’t interested in pursuing?

If the case is that even with evidence that this isn’t an uncommon practice you’re still against incorporating it in Ionic, is there advice you could give on creating a community module that does allow navigation within the modal? Or point us in the right direction towards similar Ionic internals that could be emulated?

Ultimately the preference is to see this end up in Ionic core, but i’d like to try and extend Ionic myself to get this functionality in the meantime if necessary. I’m using Ionic for a few projects and would like to continue doing so - and this modal pattern is the way one of the apps i’m working on was designed.

Any advice or guidance would be much appreciated.