Can't fully hide StatusBar

Ionic Framework ionic-v3
1

Hey guys,

Having some issues getting rid of the StatusBar. I want the view to be fullscreen the entire time, similar to a modal (which does go fullscreen). Right now when I do a StatusBar.hide(); in my app.js the best I can get is this:

image

Just a gray box, I tried using the new fullscreen=“true” option for ion-content in Beta 10 but that didn’t work.

Any ideas? Thanks!

2

Looks like the solution was to override padding-top in the following block from www/build/css/app.ios.css

// Status bar fix

ion-nav > ion-page > .toolbar.statusbar-padding:first-child,
ion-nav > ion-page > ion-header > .toolbar.statusbar-padding:first-child,
ion-tab > ion-page > ion-header > .toolbar.statusbar-padding:first-child,
ion-menu > .toolbar.statusbar-padding:first-child {
padding-top: 0px;
height: calc(44px + 20px);
min-height: calc(44px + 20px); }

ion-nav > ion-page > ion-content.statusbar-padding:first-child scroll-content,
ion-nav > ion-page > ion-header > ion-content.statusbar-padding:first-child scroll-content,
ion-tab > ion-page > ion-header > ion-content.statusbar-padding:first-child scroll-content,
ion-menu > ion-content.statusbar-padding:first-child scroll-content {
padding-top: 0px; }

ion-nav > ion-page > ion-content.statusbar-padding:first-child[padding] scroll-content,
ion-nav > ion-page > ion-content.statusbar-padding:first-child[padding-top] scroll-content,
ion-nav > ion-page > ion-header > ion-content.statusbar-padding:first-child[padding] scroll-content,
ion-nav > ion-page > ion-header > ion-content.statusbar-padding:first-child[padding-top] scroll-content,
ion-tab > ion-page > ion-header > ion-content.statusbar-padding:first-child[padding] scroll-content,
ion-tab > ion-page > ion-header > ion-content.statusbar-padding:first-child[padding-top] scroll-content,
ion-menu > ion-content.statusbar-padding:first-child[padding] scroll-content,
ion-menu > ion-content.statusbar-padding:first-child[padding-top] scroll-content {
padding-top: 0px; }

ion-nav > ion-page > .toolbar.statusbar-padding:first-child ion-segment,
ion-nav > ion-page > .toolbar.statusbar-padding:first-child ion-title,
ion-nav > ion-page > ion-header > .toolbar.statusbar-padding:first-child ion-segment,
ion-nav > ion-page > ion-header > .toolbar.statusbar-padding:first-child ion-title,
ion-tab > ion-page > ion-header > .toolbar.statusbar-padding:first-child ion-segment,
ion-tab > ion-page > ion-header > .toolbar.statusbar-padding:first-child ion-title,
ion-menu > .toolbar.statusbar-padding:first-child ion-segment,
ion-menu > .toolbar.statusbar-padding:first-child ion-title {
padding-top: 0px;
height: calc(44px + 20px);
min-height: calc(44px + 20px); }

@media only screen and (max-width: 767px) {
.modal-wrapper > ion-page > ion-header > .toolbar.statusbar-padding:first-child {
padding-top: 0px;
height: calc(44px + 20px);
min-height: calc(44px + 20px); }
.modal-wrapper > ion-page > ion-header > ion-content.statusbar-padding:first-child scroll-content {
padding-top: 20px; }
.modal-wrapper > ion-page > ion-header > ion-content.statusbar-padding:first-child[padding] scroll-content,
.modal-wrapper > ion-page > ion-header > ion-content.statusbar-padding:first-child[padding-top] scroll-content {
padding-top: 0px; }
.modal-wrapper > ion-page > ion-header > .toolbar.statusbar-padding:first-child ion-segment,
.modal-wrapper > ion-page > ion-header > .toolbar.statusbar-padding:first-child ion-title {
padding-top: 0px;
height: calc(44px + 20px);
min-height: calc(44px + 20px); } }

3

Some related topics: