Ion-nav-bar invisible inside modal

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:

Up-voted! This is as other people say a common pattern, would be nice to be able to do this.

I found a very nice workaround which does not need any route configuration. I just used a simple slidebox without pager and disabled drag control to mimic the view navigation. This is super simple and works great for me. I created a codepen for this: http://codepen.io/ikkez/pen/eNzvLd
This is my very first contribution, so please don’t slap me if this approach was no good idea. Anyway I hope this is helpful to you folks. cheers. :smile:

6 Likes

Hey @ikkez, I was actually thinking of implementing the same exact thing. The only problem with it is that I cannot reuse any regular ion-views (since the slidebox has its own templating), nor can I have dynamic views without creating some sort of slidebox router…

So yes, the idea is great if you have a small use case with a flow of statically defined views, but not really with a more complex use case like: from rootView you can either go to viewA, viewB, or viewC depending on what button you click, without having a router, or even worse a big ladder of if statements.

@gabrielcatalin

Have you got solution for this ? I am also having the same usecase.

How can I upvote this - that issue seems to have been marked closed?
I have a similar use case and I too can’t get the nav title to show up except by coercion which is not desirable. Thanks.

Hello,

has anyone figured out a solution for nicely transitioning nested views inside a modal?

Thanks!

I finally submitted a PR to fix this long time issue: https://github.com/driftyco/ionic/pull/9461