Too much margin on scroll-content when using tabs on android

Ionic Framework ionic-v3
1

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 the content is pushed down as if the tabs were there

image

image

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

EDIT:

I’ve now narrowed this down to line 476 of content.ts in the ionic-angular library

newVal = this._headerHeight;
if (this._tabbarPlacement === 'top') {
    newVal += this._tabbarHeight;
}

Not sure why but for some reason this._tabbarHeight is set to 70 in my project, but in a blank tab project it is set to 0, which is where this margin difference seems to be

I have also found that my ion-page does not have the .tab-subpage class added to it which is causing this problem!

So now I have worked out that somehow the .tab-subpage class IS being added, but then it is straight away being removed.

I can see that DebugDomRenderer.prototype.setElementClass() from @angular/core/src/debug/debug_renderer.js is being called on line 253 of tab.js to add the class to the ion-page element, with the className=tab-subpage and isAdd=true, but then it is being fired again via angular’s detect changes view function, this time with isAdd=undefined, which is in turn removing the class and therefore not setting the correct styling.

2

I believe this has been fixed in master, it’s just not released yet

3

Ah brilliant, I have been looking through the source code but not sure what the fix is.

Do you know what actually causes it? If I create a blank tabs project and push a page to the tab stack it doesn’t happen, and I have built an app before where it didn’t happen. I’m still not sure what the root of the cause is and I’ve looked in the commit history on master and can’t find anything.

And do you have any indication of then the next release will be?

Thanks :slight_smile:

4

I’m also interested in this, I’m having the exact same problem and I dont have any idea on how to fix it.

5

Looking forward to the fix, too!

6

I had something closely similar. the difference in mine was the content section stayed behind the tabs on view load. Only when I clicked tabs did it resolve itself temporarily.

The workaround was to set the margins like so (so that the tab content section on view load would position properly)

.Name-Of-Your-Controller-Class {
  ion-tabs ion-tab ion-page.show-page ion-content scroll-content {
    margin-top: 56px;
    margin-bottom: 67px;
  }
}

Let me know if this works for you.