# Can't fully hide StatusBar

**URL:** <https://forum.ionicframework.com/t/cant-fully-hide-statusbar/56765>\
**Category:** ionic-v3\
**Created:** [July 6, 2016, 3:43pm UTC](https://forum.ionicframework.com/t/cant-fully-hide-statusbar/56765 "2016-07-06T15:43:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [July 6, 2016, 3:43pm UTC](https://forum.ionicframework.com/t/cant-fully-hide-statusbar/56765/1 "2016-07-06T15:43:27Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/f/a/fa1f27c8d3512d7a5f59309900f305c638bc0c18.png)

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!

---

<div class="post-metadata">

**Author:** ![slodolce](https://avatars.discourse-cdn.com/v4/letter/s/e9a140/32.png) [@slodolce](https://forum.ionicframework.com/u/slodolce)\
**Post date:** [July 6, 2016, 8:01pm UTC](https://forum.ionicframework.com/t/cant-fully-hide-statusbar/56765/2 "2016-07-06T20:01:31Z")

</div>

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); } }

---

<div class="post-metadata">

**Author:** ![ramon](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ramon/32/75852_2.png) [@ramon](https://forum.ionicframework.com/u/ramon)\
**Post date:** [February 20, 2017, 2:18pm UTC](https://forum.ionicframework.com/t/cant-fully-hide-statusbar/56765/3 "2017-02-20T14:18:12Z")

</div>

Some related topics:

> [@How to remove space at the top of navbar](https://forum.ionicframework.com/t/how-to-remove-space-at-the-top-of-navbar/44194):
>
> Hi everyone. I’m developing an ionic 2 typescript APP, only for iOS devices. I want to hide StatusBar and I can do that installing cordova-plugin-statusbar and, after platform ready… if ( StatusBar ) StatusBar.hide( ); It works but my navbar height is incorrect. How can I remove space at the top of my navbar, after hide StatusBar? Ionic v1 solves this with: ionic.Platform.fullScreen( ); but I don’t know how to do that on ionic v2 Thanks in advance.

> [@iOS: how to remove extra space for status bar](https://forum.ionicframework.com/t/ios-how-to-remove-extra-space-for-status-bar/80234):
>
> Hi, I do not want to show a status bar in my iOS app. Though the status bar is not being displayed there is the extra 20pt for the status bar. How can I solve this?