Ionic-framework: bug: Tab page lost back navigation

[icarus31]

Type: bug

Ionic Version: 2.x

Platform: all

Before my tabs page, I have few other regular pages and the "< Back" is always present at the left corner.

When reaching my tabs page, I am losing the "< Back" in my header. Why?

How do I get the back button back when using tabs in Ionic2?

For now, I am putting the tabs inside an ion-content

[brandyscarney]

This is by design because each tab has it's own stack. We will have to put some thought into adding this as an option so I put it in a future milestone.

[kevinclarkra]

I was wondering about this too, I was trying to build something in Ionic v2 with a sidebar menu and tabs. I put the generic List page as one of the tabs [root]. When I click on a list item, it doesn't display the Back link.

[kevinclarkra]

I don't know if there is a great way to combine a side menu with tabs or if I'm doing it right. My implementation is to make a TabsPage page that imports the 3 pages I need (as tabs). THose three pages I have taken out the < ion-navbar > from the template so they don't see two side menus.

[brandyscarney]

@kevinclarkra The Ionic conference app uses a side menu and tabs, maybe that will help: https://github.com/driftyco/ionic-conference-app

The detail pages need to have the navbar though in order to show a back button.

[kevinclarkra]

@brandyscarney Thanks for the link! I will look into that. I am still trying to wrap my head around the Angular2/Ionic2 but it looks promising.

My other question - I did a new project with and without TS...the javascript looks exactly the same? I guess I am a little confused by this, the only difference is the .ts extensions.

[brandyscarney]

Yeah it is known that it isn't using valid JS, we are working on it. There is an issue for it here: https://github.com/driftyco/ionic/issues/5493 and here: https://github.com/driftyco/ionic/issues/5486

[kevinclarkra]

@brandyscarney Ahh. I was wondering about that. I like the annotations, so I probably should be using the TypeScript version instead then. Thanks for all the work you've guys done with Ionic2, I've considered Ionc 1, Framework7, Famo.us (with Angular or something), and Onsen but am really intrigued by the possibilities with Ionic2 plus the fact it has ios and Material design was the deciding factor.

[kevinclarkra]

Btw, pulled down the Speakers app and built it, saw how it works, copied the tabs over to mine...works, brilliant! I was getting frustrated there but now I made progress I feel better. Thanks again for the link

[brandyscarney]

@kevinclarkra That's so great to hear! Thank you. Glad you got it working. :smile: There are also a lot of helpful community members on our forums: https://forum.ionicframework.com

[jgw96]

Closing this as it seems it has been fixed! If it hasn't feel free to comment and i will happily reopen! (:

[brandyscarney]

The initial issue still exists, it's not fixed yet.

[zakton5]

I know that this has to be dicussed among the ionic team, but here is a solution proposal:

the getPrevious() function in nav-controller.ts could be changed to something like this:

getPrevious(view: ViewController): ViewController {
    var previous = this.getByIndex(this.indexOf(view) - 1);
    if (!previous) {
      var parent: NavController = this.parent;
      return parent ? parent.getByIndex(parent._views.length - 1) : null;
    } else {
      return previous;
    }
  }

Basically, if the current nav stack (which would be the tabs stack) has no previous view, then check if it has a parent nav stack. If it does, then return the last view in the parent nav stack.

Note: To be clear, this code won't actually work. It's just an example/idea.

[barocsi]

+1

[lonwi]

I think I have the same problem with RC1. I will just use modal instead to display profile details.

[lonwi]

Unfortunately, the tabs with modal does not close properly as well. The tabs stay visible after the this.viewCtrl.dismiss(); from the tab level.

After few tries I noticed that if you put the header above the ion-tabs the back button appears as it supposed to.

Tried this with modal way and it dismiss correctly as well.

You need to leave the ion-header in each tab as well in order to push the ion-content down. I would be useful to have something like "has-header" on ion-content so there is no point of adding empty header to the tab.

so my tabs.html looks like that

<ion-header> <ion-navbar color="blue-dark"> <button ion-button menuToggle color="white"> <ion-icon name="menu"></ion-icon> </button> <ion-title></ion-title> </ion-navbar> </ion-header> <ion-tabs color="blue-dark" tabsPlacement="bottom" tabsHighlight="true" tabsLayout="icon-hide"> <ion-tab [root]="profileTab1Root" tabTitle="Profile" tabIcon="ios-contact" [rootParams]="user"></ion-tab> <ion-tab [root]="profileTab2Root" tabTitle="Details" tabIcon="ios-information-circle" [rootParams]="user"></ion-tab> <ion-tab [root]="profileTab3Root" tabTitle="Looking for" tabIcon="ios-contacts" [rootParams]="user"></ion-tab> </ion-tabs>

and the tab-1.html looks like

<ion-header> <ion-navbar color="blue-dark"> </ion-navbar> </ion-header> <ion-content> <div class="user-profile" *ngIf="user"> {{user.firstName}} </div> </ion-content>

And it works fine.

[jstoup111]

Any status on this?

I've tried @lonwi example, but the child pages in the tab don't navigate properly. I.E.

Parent -> Tab -> Another Page on first tab ->

Clicking the back button navigates me all the way back to the parent.

[douglasjva]

@brandyscarney Some workaround was found for this problem?

[matoos32]

Here is a demo solution that uses @icarus31 's idea of "tabs inside an ion-content"
Tabs are wrapped inside a basic component, which gets the back button. I went further to hook the tabs' ion-select event. When tabs are selected the event is double-dispatched to the wrapper, providing the wrapper with the tab name . The wrapper then sets the tab name in the nav bar title.

https://github.com/matoos32/ionic-2-tabs-page-with-back-button

Happy coding!

[dalezak]

@matoos32 thanks for sharing the demo solution, I was able to get it working but ran into two issues.

One, I'm getting extra padding or margins at the top of tabs between the navbar, looks like same height as the statusbar.

Two, upon clicking Back and returning to Home, the view is initially blank for a second before it redraws.

Any idea on the cause or a solution to either of these issues? /cc @icarus31

[matoos32]

@dalezak :

One, I'm getting extra padding or margins at the top of tabs between the navbar, looks like same height as the statusbar.

It uses generated code in the landing page and boilerplate code for the wrapper and tabs. Maybe the standard CSS or your icon height?

Two, upon clicking Back and returning to Home, the view is initially blank for a second before it redraws.

Looks like an iOS specific issue but seemingly unrelated to the demo itself (see our discussion here).

[dalezak]

Thanks @matoos32, I created an issue related to the extra padding https://github.com/ionic-team/ionic/issues/13229, looks like it's an Ionic with iOS11 issue.

[matoos32]

I added new commits that migrate the sample code to Angular 5 and Ionic 3.9.2. Misnomer to call it "Ionic 2" now but I don't want to break any links anywhere. You can still access the Ionic 2 version by looking up the related tag.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/44