iOS StatusBar Bug about ionic-super-tabs

[trytuna]

For those of you who want to get it to work for iPhone X.

First install the latest statusbar plugin (only necessary before version [email protected]).

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar

Use this CSS instead of @danielehrhardt's

// Ionic Super Tabs iOS + iPhone X Fix
.ios .ion-page,
.ios .modal-wrapper > .ion-page {
    ion-header.header-ios > ion-navbar.toolbar-ios.statusbar-padding {
        padding-top: calc(4px + 20px);
        padding-top: calc(4px + env(safe-area-inset-top));
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        min-height: calc(44px + 20px);
        min-height: calc(44px + env(safe-area-inset-top));
    
        ion-title {
            padding-top: calc(4px + 20px);
            padding-top: calc(4px + env(safe-area-inset-top));
            height: calc(44px + 20px);
            height: calc(44px + env(safe-area-inset-top));
            min-height: calc(44px + 20px);
            min-height: calc(44px + env(safe-area-inset-top));
        }
    }

    super-tabs.tabs-placement-bottom super-tabs-toolbar ion-toolbar.toolbar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

I've also added those lines to get proper spacing in landscape mode for the content

ion-app.ios .scroll-content {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

[ihadeed]

It is on a real device and on Ionic Serve Lab

I just tested it on Ionic Serve Lab using version 2.6.0 and it looks fine. It might be fixed in the new release? can you please check and let me know.

[danielehrhardt]

yes seems to be fixed. Thank You!!

[cjdreiss]

Hello, I just started using your project today. I'm still getting this issue in both lab and on my actual device.

Some version info from my package.json: (i can upload more if needed)
"ionic-angular": "3.3.0",
"ionic2-super-tabs": "^2.6.2",

[cjdreiss]

So I did some digging, it looks like its about 20px off. There is a css rule that is being applied to nav bars, but its very specific and since your new tabs doesnt have the ion-tabs attribute it doesn't get the styling applied. Its adding 20px to the height of the navbars it looks like.

Here's some screenshots and the actual super long and specific selector. NOTE: I just switched to material for all platforms, but it still has the issue. I'm sure there is a similar css selector for ios

.md ion-nav > .ion-page > .toolbar.statusbar-padding:first-child, 
.md ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child, 
.md ion-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child, 
.md ion-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child, 
.md ion-menu > .menu-inner > .toolbar.statusbar-padding:first-child, 
.md ion-menu > .menu-inner > ion-header > 
.toolbar.statusbar-padding:first-child {
    padding-top: calc(20px + 4px);
    min-height: calc(56px + 20px);
}

I just went in to my app.scss file for now and added the following:

// fix for super-tabs on ios
.md ion-nav > .ion-page > .toolbar.statusbar-padding:first-child,
.md ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,

.md super-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md super-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,

.md ion-menu > .menu-inner > .toolbar.statusbar-padding:first-child,
.md ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
  padding-top: calc(20px + 4px);
  min-height: calc(56px + 20px);
}


.ios ion-nav > .ion-page > .toolbar.statusbar-padding:first-child,
.ios ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.ios ion-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.ios ion-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,

.ios super-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.ios super-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,

.ios ion-menu > .menu-inner > .toolbar.statusbar-padding:first-child,
.ios ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
  padding-top: calc(20px + 4px);
  min-height: calc(44px + 20px);
}

[danielehrhardt]

@cjdreiss
My solution is much smaller is this not working?

// Ionic Super Tabs iOS Fix
super-tabs-container {
    ion-header {
        .toolbar {
            padding-top: calc(20px + 4px);
            min-height: calc(44px + 20px);
            .title {
                padding-top: 20px;
                height: calc(44px + 20px);
                min-height: calc(44px + 20px);
            }
        }
    }
}

[cjdreiss]

@danielehrhardt it looks like it would work. I didn't try yours in the first place because I saw that 2.6 was thought to have fixed it.

Then after doing some debugging I saw all the selectors that Ionic was using so I figured it would be best to just add the super-tab/s to the list and do what is done in the framework.

[silverio]

hi @trytuna your fix isn't working anymore on iPhone X (it works fine for other iOS devices), this is how it looks.

[trytuna]

I've updated my last post. constant is deprecated since iOS 11.2 env should be used instead.

[silverio]

thanks for the update!!

[Sulorb]

A huge thanks trytuna, you saved my day !