Ion-nav-bar invisible inside modal

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.

Yeah so this won’t something we will be working.
Since we’re tied to UI-Router, it becomes difficult to manage something thats a state, but no really a state.

Can you please rephrase your answer? I’ve been following this thread and this issue is very important to the mobile app we are currently working on. I’m surprised that not being able to have consistent and standard behavior when navigating inside a modal is not something that is on a bug list. I don’t get your point about managing something that’s a state, but not really a state. Can you elaborate?

I will chime in again as well. I’m not sure I follow the reasoning, as UI-Router does support nested states. Further, the routing isn’t the problem. Navigation inside the modal actually works, the issue is the (dis-)appearance of the nav-bar. Further still, this used to work as expected, and is a very common UI pattern.

2 Likes

So we assume that Ionic isn’t working on this, really? As @jpcamara stated before, can you give us some hints about where should we start to bring this feature to our apps?

I’m working on a quite big app that has this kind of navigation as a requirement.

Looks like this is not something we’ll see very soon. Any one interested should up-vote the feature request on trello: