Changing background colour on a toast generated by ToastController changes the colour of the entire background

[ionitron-bot[bot]]

Original issue by @bengrah-miller on 2018-03-02T14:31:49Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [x] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: I want to change the background colour on a toast generated by ToastController. I've got a custom class residing in app.scss that I want to use for styling this toast. The toast is being called from a Service. In my service I have the following code:

                let toast = this.toastController.create({
                    message: 'Checking for items to upload...',
                    duration: 3000,
                    position: 'bottom',
                    cssClass: 'normalToast'
                });

                toast.present()

In app.scss I have the class declared:

.normalToast {
background: color($colors, primary)
}

When I rebuild and deploy, the toast fires successfully and the background colour has changed, but the entire screen is now filled up with the toast background.

Expected behavior: The toast background colour changes, not the whole application

Steps to reproduce: See above

Other information: It's entirely possible I'm just not using cssClass right, but there's very little info on the Ionic Docs, Stack Overflow, etc.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

PS C:\MobileDev\site-manager-app-upgraded> ionic info

cli packages: (C:\Users\bengrah\AppData\Roaming\npm\node_modules)

    @ionic/cli-plugin-proxy : 1.5.7
    @ionic/cli-utils        : 1.19.1
    ionic (Ionic CLI)       : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.7.1
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME     : C:\Android\android-sdk
    HTTP_PROXY       : http://webproxy.xxxxxxx.com:8081
    http_proxy       : http://webproxy.xxxxxxx.com:8081
    HTTPS_PROXY      : not set
    https_proxy      : not set
    IONIC_HTTP_PROXY : http://webproxy.xxxxxx.com:8081
    PROXY            : not set
    proxy            : not set

Misc:

    backend : pro

[ansarikhurshid786]

How to change background color of toast ?

[lolohamido]

showToast(msg: string) { let toast = this.toastCtrl.create({ message: msg, duration: 3000, position: 'bottom', cssClass: 'changeToast' }); toast.present(toast); }

in app.css .changeToast{ .toast-wrapper { opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary); } };