Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TOASTR ERROR BACKGROUND COLOUR IS WHITE...! #658

Open
MakkiAbid opened this issue Nov 17, 2020 · 10 comments
Open

TOASTR ERROR BACKGROUND COLOUR IS WHITE...! #658

MakkiAbid opened this issue Nov 17, 2020 · 10 comments

Comments

@MakkiAbid
Copy link

No description provided.

@MakkiAbid
Copy link
Author

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

@ShoaibZhaid
Copy link

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

@ta3pks
Copy link

ta3pks commented Mar 19, 2021

I have the same problem

@Eva02Daruma
Copy link

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

@Frenzoid
Copy link

Frenzoid commented Aug 11, 2021 •
edited
Loading

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

@Victonator
Copy link

Victonator commented Sep 9, 2021 •
edited
Loading

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

@Hackjaku
Copy link

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

image

@ghost
Copy link

ghost commented Jan 5, 2023

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

@nimeshkasun
Copy link

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.

@michels-dev
Copy link

simple code
if you succes change query sintaks,

example :
for toastr success
{{-- notifikasi toast --}}

<script> @if (Session::has('success')) toastr.success("{{Session::get('success')}}") @endif </script>

in controller :
return redirect()->route('admin.table-ruangan')->with('success','approved');
if you error changes success to error
example :
{{-- notifikasi toast --}}

<script> @if (Session::has('error')) toastr.error("{{Session::get('error')}}") @endif </script>

in controller :
return redirect()->route('admin.table-ruangan')->with('error','approved');

        thank u, i am using framework laravel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@ta3pks @ShoaibZhaid @nimeshkasun @Frenzoid @Hackjaku @MakkiAbid @Victonator @Eva02Daruma @michels-dev