Ionic-framework: Changing background colour on a toast generated by ToastController changes the colour of the entire background

[bengrah-miller]

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

[DylanGom]

Thats cause you are not using the right css styling. You are changing the entire background by using it on the css class you provide with the parameter.
This is easily fixed by adding a class extra

.normalToast { .toast-message { border-radius: 0.65rem !important; background: color($colors, primary) } }

Next time these things can be easily fixed just inspecting elements and trying to add background-color on deeper elements

[bengrah-miller]

Hi Dylan,

Thanks for the update - I think this points to a broader point that
changing the background or the CSS styles in general isn't very clear
from the Ionic Docs; it just mentions apply styles and then jobs a
goodun.

Ben.

Ben Graham | ECM Lead | Miller Homes
T : 0870 336 5062 | M : 07718 516232 | www.millerhomes.co.uk
Miller House, First Floor, 2 Lochside View, Edinburgh Park, Edinburgh,
EH12 9DH

Miller Homes Limited Registered in Scotland - SC255429

2 Lochside View, Edinburgh Park, Edinburgh, EH12 9DH

Disclaimer: The Information in this e-mail is confidential and for use
by the addressee(s) only. It may also be privileged. If you are not the
intended recipient please notify us immediately on [phone]
and delete the message from your computer: you may not copy or forward
it, or use or disclose its contents to any other person. We do not
accept any liability or responsibility for: (1) changes made to this
email after it was sent, or (2) viruses transmitted through this email
or any attachment.

Dylan Gomes [e-mail] 05/03/2018 18:01 >>>
Thats cause you are not using the right css styling. You are changing
the entire background by using it on the css class you provide with the
parameter.
This is easily fixed by adding a class extra
.normalToast { .toast-message { border-radius: 0.65rem !important;
background: color($colors, primary) } }
Next time these things can be easily fixed just inspecting elements and
trying to add background-color on deeper elements
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
(
https://github.com/ionic-team/ionic/issues/14099#issuecomment-370507158)
, or mute the thread
(
https://github.com/notifications/unsubscribe-auth/AK6ZwjijWch-1ksz04eizRyCllwDIbnBks5tbX1rgaJpZM4SZ-Rk)
.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/767