Alert, Confirm, Loading etc is dark, overlap by overlay

Ionic Framework ionic-v3
#1

Whay my component like Alert, Confirm, Loading, look overlap by overlay is dark in android device, in web is good.?

image
Screenshot_2016-07-27-12-56-10.png720×1280 47.8 KB

#2

provide a piece of code where you are performing Alert, confirm, etc.
so that developers can help you…

#3

ok, sorry, this is my code
app.ts

logout() {
        this.menu.close();
        this.nunic.confirm('Yakin nih', () => {
            this.nunic.showLoading('Mohon tunggu', this.nav);
            this.autSrv.logout().subscribe(
                resp => {
                    this.nunic.hideLoading();
                    if (resp.status == true) {
                        this.userData.logout();
                        // this.rootPage = LoginPage;
                        this.nav.setRoot(LoginPage);
                        //this.nav.push(LoginPage);
                    }
                }, error => {
                    this.nunic.hideLoading();
                });
        }, () => {
//            console.log('Tidak');
}, this.nav);
    }

nunic.ts

import { Injectable } from ‘@angular/core’;
import { Toast, Loading, App, Alert } from ‘ionic-angular’;

@Injectable()
export class Nunic {
loading: any;
nav: any;

constructor(private app: App) {
    this.nav = this.app.getActiveNav();
}

toast(txt: string, nav: any = null) {
    let toast = Toast.create({
        message: txt + '...',
        duration: 3000,
        position: 'bottom'
    });

    if (nav != null) {
        nav.present(toast);
    } else {
        this.nav.present(toast);
    }
}

showLoading(txt: string, nav: any = null) {
    this.loading = Loading.create({
        content: txt,
        //spinner: 'dots'
    });

    if (nav != null) {
        nav.present(this.loading);
    } else {
        this.nav.present(this.loading);
    }
}

hideLoading() {
    this.loading.dismiss();
}

confirm(txt: string, okCallback: () => void, noCallback: () => void, nav: any = null) {
    //        console.log(this.nav);
    //        console.log(nav);
    let confirm = Alert.create({
        title: 'Konfirmasi',
        message: txt + ' ?',
        buttons: [
            {
                text: 'Ya',
                handler: () => {
                    okCallback();
                }
            },
            {
                text: 'Tidak',
                handler: () => {
                    noCallback();
                }
            }
        ]
    });
    if (nav != null) {
        nav.present(confirm);
    } else {
        this.nav.present(confirm);
    }
}

}

#4

I think you have to put this.nunic.showLoading('Mohon tunggu', this.nav); this line after the this.menu.close();

#5

the loading only show if Yes button clicked in confim, its impossible place it after close menu.

#6

then you have to handle such thing in confirm’s ok button handler… i.e. when to show loading and when to not…

and if you are doing setRoot from alert then you have to first remove alert from stack then use setRoot

here is sample code

logOut() {
    let alert = Alert.create({
        title: 'Alert',
        subTitle: 'You want to logout',
        buttons: [{
            text: 'Ok',
            handler: () => {
                // 'this.nav.remove', removes the 'Alert' from the stack
                // and then 'this.nav.setRoot' to change the rootPage
                this.nav.remove().then(() => {
                    this.nav.setRoot(LoginPage, {}, {animate: true, direction: 'back'});
                });
            }
        }]
    });
    this.nav.present(alert);
}

EDIT: from beta 11 update of ionic 2. There is no need to remove alert from navigation stack, because from beta 11 every overlay components having its own controller…

#7

No effects guys, please see below picture :

In Web, OK

image
Screenshot from 2016-07-27 15:30:47.png1366×768 50.7 KB

In Android Device, not ok :confused:

image
Screenshot_2016-07-27-15-30-14.png720×1280 45.3 KB

#8

Don’t know about this behaviour… this does not happen with me.

below link may help you in a case of Loading component…

#9

This could get fixed if you use Ionic 2 pre beta 11 ("ionic-angular": "nightly") and use the new controllers for them.

An example on how to upgrade your beta.10 to nightly and the new controllers:

#10

Thanks for your help, i have not solved my problem :grin:

#11

This my ionic info, should i update ?

image

#12

That’s the version of your Ionic CLI, not your Ionic 2 project.

This is my ionic info from my project’s folder:


Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10-201607151701
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS: Distributor ID:     Ubuntu Description:     Ubuntu 16.04.1 LTS 
Node Version: v5.12.0

Note the Ionic Framework Version: 2.0.0-beta.10-201607151701, that’s the version used by the project, specified on the package.json, which installs everything when you execute

npm install
#13

This is my ionic info
image

The problem not resolved yet. And last night i have tried to other phone, the backdrop is normal, the loading or alert is works well, is issue about android version ? My Android is Jelly Bean.

#14

I resolved the problem with install croswalk, maybe my android web view render not properly.
Thanks