Ionic-framework: [4.0.0-rc.1] ion-back-button not visible on child page of ion tab

[Silvest89]

Bug Report
Ionic version:
[x] 4.0.0.rc-1

Current behavior:
I do see in the element list that the second page in the stack gets an can-go-back class.
However the ion-back-button remains invisible (display:none)

Expected behavior:
ion-back-button should be visible. As there is a previous page in the stack.

Steps to reproduce:
I have a page with a sidepanel menu. Which is a tab page. I navigate to the child page with navigateForward(), I can go back either by swiping back or pressing the tab icon.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.2.1
   @angular/cli                  : 7.2.1
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 24 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v11.6.0 (/usr/local/Cellar/node/11.6.0/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10O45e

[manucorporat]

We can't reproduce this issue, can you provide a repo case that reproduces the issue?
If .can-go-back is there, what is preventing the ion-back-button to be visible?

Can you also share the markup of the page that is not getting the visible ion-back-button?

[Silvest89]

We can't reproduce this issue, can you provide a repo case that reproduces the issue?
If .can-go-back is there, what is preventing the ion-back-button to be visible?

Can you also share the markup of the page that is not getting the visible ion-back-button?

After further investigating I found out that it happens if you wrap the ion-header in another component. So that component actually contains the ion-header

So this won't work

<header-component></header-component>
<ion-content><ion-content>

But if you take out the ion-header

<ion-header>
  <header-component></header-component>
</ion-header>
<ion-content></ion-content>

What I did found out is if you got back by swiping back you would get back to the root tab with a visible back button in the header.

[paulstelzer]

The reason you cannot add it inside a component is this css: https://github.com/ionic-team/ionic/blob/master/core/src/components/back-button/back-button.scss#L84

ion-header has to be a child of .can-go-back which is added to the host of your component. So if you put it inside another subcomponent, it will not working

You could add additional css, for example (add this in your global.scss):

.can-go-back header-component ion-back-button {
  display: block;
}

A problem of this css is if you have more than one ion-router-outlet and so every page in stack can get this css too . I think this is the reason for the child combinator selector.

From my point of view this issue can be closed or what do you think @manucorporat

[weini01]

I have the same Problem, I also have an ion-header inside a custom header component. If i add the display:block css code it shows the button but the button doesn´t work. Is there an other thing i missed. Even if i set the defaultHref it´s not working.

[paulstelzer]

Okay, then it's not working to have the ion-header inside a custom component. You have to set it at the same level as the ion content

<ion-header>
</ion-header>
<ion-content>
</ion-content>

Do not put it inside another component

[weini01]

Ok, the wired thing is, that i have ion-header and ion-content on the same Level but in a custom Component, which show default header with an iOs12 Title to Header scrolling. It only works if i put the ion-header to the main-component the router directs to, but this is not nice for whole app header customization.

[paulstelzer]

Do you have a repo to check it?

[weini01]

This is my custom header

@Component({
selector: "ca-header",
  template: 
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button *ngIf="backButton"></ion-back-button>
        </ion-buttons>
        <ion-title>{{title}}</ion-title>
        <ion-buttons slot="end">
          <ion-button *ngIf="rightButton" class="done-button (click)="rightButtonClick.emit(rightButton)">{{rightButton}}</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content  [scrollEvents]="true" [fullscreen]="true" (ionScroll)="onScroll($event)">

      <ion-toolbar #toolbar class="toolbar-scroll">
          <h1 >{{title}}</h1>
          <span>{{description}}</span>
      </ion-toolbar>
        <ng-content></ng-content>
      </ion-content>
  ,
  styles: [
    :host-context(.can-go-back > ion-header), :host(.show-back-button) {
      display: block;
    }
  ]
})
export class NavHeaderComponent { ... 

and this is the call:

<ca-header [title]="Title" [description]="description" [backButton]="true" >
  ... content goes here ...
</ca-header>

[paulstelzer]

As said before could you add a repo, that not helps so much :(

[weini01]

I created a ionic tab example repo. Hope this helps to explain.
https://github.com/weini01/ionic4-tab-custom-header

[weini01]

@paulstelzer are there any news about this issue? Is this a bug or just the way it´s currently working?

[weini01]

Are there any news on this issue?

[AlexTemina-Sopra]

is this solved?

[weini01]

In my opinion it is not solved. but i did not get response for a while.

[ibanjo]

I can confirm that adding a dedicated CSS rule like

tabbed-navigator.can-go-back ion-back-button { display: block; }

solves the problem. Many related issues, such as what "back" means, are usually related to router configuration.

[brandyscarney]

Thanks for the issue! A lot of our code is set up so that a page should have only these immediate children:

<ion-header/>
<ion-content/>
<ion-footer/>

The header documentation states this as well:

Header is a parent component that holds the toolbar component. It's important to note that ion-header needs to be the one of the three root elements of a page

We tend to run into issues when custom wrappers are used. This is the CSS in back-button that is likely causing the issue:

:host-context(.can-go-back > ion-header),
:host(.show-back-button) {
  display: block;
}

I can mark this as a bug but if anyone has time to debug this further to find what works in Ionic for your use case that would be helpful. Thanks! 🙂

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[bobajeff]

I ran into this issue following the tutorial on ionic's youtube channel: "Ionic Framework Crash Course (4.0+)".

Putting ion-back-button { display: block; } into detail.page.scss solved it. The video should be updated to include a note to this affect for people who come across it in the future.

---

Edit: also adding defaultHref='/home' to the ion-back-button attributes will also fix this.
Edit2: also https://ionicframework.com/docs/api/buttons needs to be updated about this aswell.