Giters

CodeSeven / toastr

Simple javascript toast notifications

Home Page:http://www.toastrjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TOASTR ERROR BACKGROUND COLOUR IS WHITE...!

MakkiAbid opened this issue · comments

commented

I'm using toastr.error to display danger popup on my validation fields but its showing white background..!

commented

just add this in your style
<style> #toast-container > .toast-error { background-color: #BD362F; } </style>

commented

I have the same problem

commented

me too!!, someone knows how to resolve this problem?

commented

I've tried this:

<!doctype html>
<html lang="en">

<head>
    <!-- Toast CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
        integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
        crossorigin="anonymous" />
</head>

<body>

    <button onclick="error()">Click me!</button>

    <script>
        function error(data) {
            toastr.options = {
                preventDuplicates: true,
                timeOut: 4000,
                progressBar: true,
                positionClass: "toast-top-center"
            }

            toastr.error(`Error!`, 'Error!')

        }
    </script>

    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <!-- Toast js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
        integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
        crossorigin="anonymous"></script>
</body>

</html>

And works good to me.

image

commented

This is probably due to using bootstrap.
Bootstrap also has a class .toast and is overriding the toastr .toast-error background-colour.
bootstrap

In my case this was solved by linking toastr after bootstrap like this.
linken

commented

If you are facing this issue using Angular, you should check that you imported the toastr.css correctly in your angular.json.

image

commented

This is probably due to using bootstrap. Bootstrap also has a class .toast and is overriding the toastr .toast-error background-colour. bootstrap

In my case this was solved by linking toastr after bootstrap like this. linken

Thank you! It's work

commented

I've tried this:

<!doctype html>
<html lang="en">

<head>
    <!-- Toast CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
        integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
        crossorigin="anonymous" />
</head>

<body>

    <button onclick="error()">Click me!</button>

    <script>
        function error(data) {
            toastr.options = {
                preventDuplicates: true,
                timeOut: 4000,
                progressBar: true,
                positionClass: "toast-top-center"
            }

            toastr.error(`Error!`, 'Error!')

        }
    </script>

    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <!-- Toast js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
        integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
        crossorigin="anonymous"></script>
</body>

</html>

And works good to me.

image

This worked for me. Thanks.