Full screen ionic 2

Ionic Framework ionic-v3
1

How to display an item in full screen ?

2

Anyone ? I want a full screen like for images

3

You could just use a modal with a transparent header or a fullscreen ion-slide.

1 Like
4

Bright idea thanks :smiley:

5

I did succeed displaying in fullscreen but in my android device there is always that minibar of my phone for time, career, … here is the image image

6

You mean the statusbar? You can hide that by using the statusbar plugin (documentation over here) and call StatusBar.hide().

2 Likes
7

I ll try that Thank you

8

I installed the plugin and followed the documentation. Yet the command this.statusBar.overlaysWebView(false); doesn’t seem to work .

the status bar is still visible

9

You should use the hide() function as I mentioned. overlayswebview only applies to the position of the statusbar, ie over your app or on the top of your app.

10

Unfortunately it didn’t work too :frowning: here 's what I did in my page:

`import { StatusBar } from '@ionic-native/status-bar';

constructor(private statusBar: StatusBar) { this.statusBar.hide(); }

And in the app.module.ts
`import { StatusBar } from ‘@ionic-native/status-bar’;

`@NgModule({
…

providers: [
…
StatusBar
…
]
…
})`

Am I missing something here ?

11

Okay, correct me if I’m wrong. You want a fullpage without any statusbar at the top right? Did you manage to get a FullPage now, but with a statusbar? And I see you’re calling this.statusBar.hide() inside your constructor. You should definitely wrap it an a platform ready, because now you don’t now if this function is beiing executed at all. Do you want the statusbar to show nowhere in the app or just on a specific page?

12

@luukschoen I want the statusbar not to show in a specific page. Thank for you for your help

13

Okay, could you show me the code of your page :slight_smile: ?

14 
`import { Component } from '@angular/core';

import { NavController, NavParams, Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar';

@Component({ selector: 'page-historique-graph', templateUrl: 'historique-graph.html' }) export class HistoriqueGraphPage { constructor(platform: Platform, private statusBar: StatusBar, public navCtrl: NavController, public navParams: NavParams) { platform.ready().then(() => { this.statusBar.hide(); }); }

15

Could you move the platform ready code to:

to this, and outside of your constructor

  ionViewDidEnter() {
       this.platform.ready().then(() => {
        this.statusBar.hide();
   });
  }
16

I uninstalled the app just in case and run the modification it didn’t work :frowning:

17

Does any of the other functions on the statusbar work accordingly? So, if you try to modify the background color to black with this.statusBar.backgroundColorByHexString(’#000000’); for instance.

I never had any issues with the statusbar plugin, it’s actually pretty damn solid. Do you get any error messages? Just to be sure, you are running it on a device right? Not in the browser?

If you ask for the visibility of the statusbar and you log it, what does your logs say? (you can call StatusBar. isVisible to check whether it’s visible according to the device)

18

You’re right it doesn’t work. I’m pretty sure I missed something.
Edit: I’m running the app in the device

19

And you’re testing on a real device right? Not in the browser? Do you see ANY errors ?

20

I’m running on a device Samsung A3(2014) android 6.0