CODEWITHSUNDEEP
cssangularionic-frameworksassionic2
FranSto
FranSto

Reputation: 39

Ionic 2 loadingController cssClass not working

I want my loadingController wrapper to be shown with a customized css style but the css's rules doesn't apply to the element (the loadingController wrapper).

I have this in my component:

ionViewDidLoad() {
    let loader = this.loadingController.create({
        spinner: 'bubbles',
        content: 'getting data...',
        cssClass: 'loadingwrapper'
    });
    loader.present().then(() => {
        //some stuff
        ...
        loader.dismiss();
    });
}

and this in my css file:

.loadingwrapper{
    width: 77% !important;
    height: 15% !important;
    color: black !important;
    font-size: 1.25em !important;
    background-color: aliceblue !important;
    border-radius: 10px !important;
}

In spite of doing this (I've even tried whithout "!important"), the changes (none of them) doesn't apply to the loading wrapper and it shows a bit awful.

Upvotes: 1

Views: 1458

Answers (2)

Sampath
Sampath

Reputation: 65870

You have to do it globally inside the variables.scss file.

Android

$loading-md-border-radius:10px;

ios

$loading-ios-border-radius: 10px

Windows

$loading-wp-border-radius:  10px

You can see global variable list here.

Upvotes: 0

user1752532
user1752532

Reputation:

Not sure where you are applying the css but if you are applying the css in the page component file you going to have a hard time, because the loading controller sits outside the page selector. So if your page component name is Foobar and you have a .scss file foobar.scss

page-foobar{
    .loadingwrapper{
        // not going to work
    }
}

you can either add it globally to your app/app.scss file or ( i think this will work )

.md,.ios,.wp{
    page-foobar{
       .loadingwrapper{
        // styles!
       }
    }
}

Upvotes: 1

Related Questions