Tabbar not appearing on android inside of nested view when placed at bottom

Ionic Framework ionic-v3
1

I configured the tabbarPlacement: ‘bottom’ in the @App decorator so my navigation bar is at the bottom on Android. It works on the homepage but as soon as you move down into a nested view it disappears completely. Has anyone else experienced this behavior?

My config:

@App({
  templateUrl: 'build/app.html',
  config: {
    backButtonIcon: 'ios-arrow-back',
    backButtonText: '',
    tabbarPlacement: 'bottom'
  }
})
2

Any way you could replicate this in a codepen or a smaller git repo?

3

I will most definitely try to recreate the issue in codepen for you but before I do that could you look at my @app decorator and make sure it looks correct first? I’ve updated my description and put it in there.

4

I updated to the latest ionic-framework release and this is no longer an issue. Thanks for the speedy reply though! :confetti_ball:

5

UPDATE: The REAL fix for this was adding tabSubPages: false to the app config.

@App({
  templateUrl: 'build/app.html',
  config: {
    backButtonIcon: 'ios-arrow-back',
    backButtonText: '',
    tabbarPlacement: 'bottom',
    tabSubPages: false
  }
})

I’m not sure why it is false instead of true but that’s what is working… Could you speculate on this @mhartington?

6

I am seeing something weird happening with this.

Only happens on Android. I have left tabbar placement as default (top).

Firstly, settings tabSubPages: false makes the tabs visible on each page in the view stack (where I would expect false to make them hidden)

But secondly, when set to true (or not set at all) then the tabs are hidden but they are taking up space in the markup and the content is pushed down as if the tabs were there

image

image

EDIT:

It looks like something is making the child view have a larger margin than it should have…

image

On a blank project, this margin is set to 56px, however for some reason it is being set to 126px for me which is making the gap