How to hide bar behind status bar?


#1

I am attempting to remove the opaque bar between the status bar and my app’s content using the cordova-plugin-statusbar for Ionic. This does not seem to be part of the status bar because it is visible even when the status bar is not.

I believe this issue may have something to do with the lack of an <ion-header> element but I am note sure. Furthermore, I have not had this issue in my other non-Ionic Cordova projects.

Here is my $ ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

I have tried the following status bar configurations:

Default

this.statusBar.styleDefault();

statusBar.styleDefault()

Hidden

this.statusBar.hide();

statusBar.hide()

Light Content

this.statusBar.styleLightContent();

statusBar.styleLightContent()

Light Content & No Overlay

this.statusBar.overlaysWebView(false);
this.statusBar.styleLightContent();

statusBar.styleLightContent() & statusBar.overlaysWebView(false)


#2

Did you already try it with ion-content fullscreen? If that doesn’t work, just move the entire thing up with a negative top margin.


#3

I tried the fullscreen attribute and setting the margin to negative, but in both cases it did nothing. It seems that there is an unknown element absolutely positioned above the content and behind the status bar.


#4

It seems as if the search bar background is being set by Ionic rather than being transparent by default. It does not seem to be an HTML element because if I hide all elements with CSS the status bar still shows a background.

* {
	display: none;
	margin: 0;
	padding: 0;
	top: 0;
}

#5

Did you make the statusbar translucent? If you would like, could you please provide the HTML your using for the specific page?

You could always set the styles.xml (this is android specific, but a little bit out of scope for most Ionic users since it’s tied to the platform and not to javascript) but that definitely worked for me in the past.

EDIT: since this is the easiest way to achieve what I think you want to achieve:

go inside your platforms --> android --> src --> packagename --> MainActivity.Java

After the super.oncreate() method, add this:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
	getWindow().getDecorView().setSystemUiVisibility(
	   View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
	   View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}

this wraps your view under the statusbar if on android kitkat or higher (due to compatibility).

Add these to your imports (also on MainActivity.java)


import android.os.Build;
import android.view.View;

In your config.xml add this line:

<preference name="StatusBarBackgroundColor" value="#33000000"/>

build your android project again and you will see some nice translucent results :wink:


#6

@luukschoen as you can see from the original post, I tried a number of different parameters for the search bar but there is always an opaque bar that remains. Is there something else I need to do to “make the statusbar translucent”?

Thank you for your suggested workaround on Android devices, but this app is to be used only used on iOS devices.

Per your request, here is the HTML on that page. I have tried it with different content and it does not change the outcome. This is just the list.html page that comes with ionic start myApp sidemenu but I have removed the header.

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-left></ion-icon>
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

I think that the mystery bar is a native component rather than an HTML component because it seems to blur the content behind it when I scroll up (like when opening an app folder or the Notification Center on iOS). This is not possible with HTML elements because the blur filter cannot blur elements behind it.


#7

Oooooh that’s definitely possible. In fact, there was a blog post about this. I didn’t know you were trying to create this for iOS. You can even recreate this ‘frost’ effect. It was documented in the blog about beta 10 which you can find over here: http://blog.ionic.io/ionic-2-beta-10-is-live/

When I come to think about it, I think you just want to hide the statusbar with this.statusBar.hide(); Also make sure your statusbar overlays the content, so you’re not having this margin at the top.


#8

I was not aware of the frost effect, very cool new feature!

In the OP I included a screenshot when calling this.statusBar.hide(); as well as a screenshot when calling this.statusBar.overlaysWebView(false);.

These parameters are clearly changing the way the status bar is displayed, but in all attempts there was a 20px tall bar that looks like it has the frost effect, even when calling hide() and the signal/time/battery in the status bar are hidden.

Is this an Ionic-generated element? How can I hide the frost-style bar?

My goal is to show the status bar content without the white-ish bar over my content. Here is an example from our existing Cordova app that we want to move to Ionic:


#9

I tested this setup and it works like a charm on an Iphone 5c:

this.statusBar.hide();
this.statusBar.overlaysWebView(true);

and on the ion-content:<ion-content fullscreen>


#10

It looks like this is an intermittent issue with the Ionic View app. I did not suspect the app because the errant bar did not appear on all screens and I was able to change the style of the content in the statusbar and hide it (as seen in the OP).

After building the app with ionic build ios and testing it via Xcode, I was able to see that this is an issue caused by the Ionic View app, not my code or the Ionic framework itself. It looks like this issue has been reported here

Thanks for the help!


#11

Were you able to get a fix for this?