Changing positionclass for toastr Notification

Question

I am trying to change positionclass for my toast on div click.

positionclass:is not changed to Bottom.? what am i missing here?

and how to use

toastr.optionsOverride = 'positionclass:toast-bottom-full-width';

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<head>
    <title></title>
    <script type ="text/javascript" src ="@Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
    <script type ="text/javascript" src ="@Url.Content("~/Scripts/toastr.js")"></script>
    <link rel="stylesheet" type="text/css" href="~/content/toastr.css" />
</head>
<script type="text/javascript">
    $(document).ready(function () {

        // show when page load
        toastr.info('Page Loaded!');

        $('#linkButton').click(function () {
            toastr.optionsOverride = 'positionclass:toast-bottom-full-width';
            // show when the button is clicked
            toastr.success('Click Button', 'ButtonClick', 'positionclass:toast-bottom-full-width');
        });

    });

</script>

<body>
    <div id ="linkButton" > click here</div>
</body>

update 1

after debugging i have noticed that below getOptions method from toastr.js is overriding 'positionclass:toast-bottom-full-width' to 'toast-top-right'

    function getOptions() {
        return $.extend({}, defaults, toastr.options);
    }

update 2 Line 140 in toastr.js is not successfully extending m optionsOverride in to options.??

        if (typeof (map.optionsOverride) !== 'undefined') {
            options = $.extend(options, map.optionsOverride);
            iconClass = map.optionsOverride.iconClass || iconClass;
        }

update 3 Postion issue has been fixed but I have to mention position class 3 times as below. I am sure there is a less noisy way to achieve this.

$('#linkButton').click(function () {

    toastr.optionsOverride = 'positionclass = "toast-bottom-full-width"';
    toastr.options.positionClass = 'toast-bottom-full-width';
     //show when the button is clicked
    toastr.success('Click Button', 'ButtonClick', 'positionclass = "toast-bottom-full-width"');
});

John Papa · Accepted Answer · 2016-03-14T00:03:26.203

42

You can just set it like this, as shown in the toastr demo: http://codeseven.github.io/toastr/ or this demo: http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB

toastr.options = {
  "debug": false,
  "positionClass": "toast-bottom-full-width",
  "onclick": null,
  "fadeIn": 300,
  "fadeOut": 1000,
  "timeOut": 5000,
  "extendedTimeOut": 1000
}

edited Mar 14 '16 at 00:03

answered Jun 30 '13 at 20:07

John Papa

21,880
4
61
60

Thanks @John. I figured out from given examples For some reasons i need to set it 2 times to make it work. Thank you for awesome library – swapneel Jul 03 '13 at 10:49
1

@JohnPapa Can you explain where to put this? I have tried putting in my document onready, and also right before my call to toastr.warning. It doesn't seem to take. BTW I am just trying to change the showDuration so my options look like this: `toastr.options = { "showDuration": "20000", }` – wilblack Jan 14 '14 at 19:37
Version `2.0.2` has an issue where `positionClass` is not respected in all cases: [See the issue on GitHub](https://github.com/CodeSeven/toastr/issues/156). It is fixed in `2.0.3`, but at the time of me writing this comment, there is no `2.0.3` release yet. – Doctor Blue May 16 '14 at 13:55
Correct, this has been fixed in what will be the next point release 2.0.3. Should be out soon or you can grab from github now. – John Papa May 17 '14 at 23:00
In fact, toastr 2.0.3 is now released on bower, nuget and soon on cdnjs – John Papa May 18 '14 at 00:03
1

There is a mistake: instead of ":" it needs to be "=". I tried to edit the post, but it needed to have at least 6 characters... – Sebastian D'Agostino Mar 07 '16 at 15:49

score 9 · Answer 2 · answered Nov 24 '17 at 00:25

it's a easy simple steps to change the position......see in below..

first declare the position class before showing the message.

EX: toastr.options.positionClass = 'toast-bottom-right';

Then show your message as below:

Command:toastr"success"

Hope it with work well....Thanks

I just used it in my Laravel project.... I will put my code here if you understand it....

<script src="{{ asset('js/toastr.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">


    @if (Session::has('success'))

        toastr.options.positionClass = 'toast-bottom-right';
        toastr.success("{{ Session::get('success') }}");

    @endif


</script>

toastr notifications

For top left: `toastr.options.positionClass = "toast-top-left";` — Martlark, Aug 28 '22 at 21:52

score 7 · Answer 3 · edited Jul 21 '17 at 23:11

Ya there's definately a bug here...

For example. Setting the options is a bit sticky. I set them dynamically right before call the toast type I want. The first time, the options don't matter. The next toast seem to pick up the options, and then the toast after that won't change.

For example

var logger = app.mainModule.factory('logger', ['$log', function ($log) {

var error = function (msg, data, showtoast) {

    if (showtoast) {
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "positionClass": "toast-bottom-full-width",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "300000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
        toastr.error(msg);
    }
    $log.error(msg, data);
};
var info = function (msg, data, showtoast) {

    if (showtoast) {
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "positionClass": "toast-bottom-right",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "300000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
        toastr.info(msg);
    }
    $log.info(msg, data);
};
var warning = function (msg, data, showtoast) {

    if (showtoast) {
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "positionClass": "toast-bottom-right",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
        toastr.warning(msg);
    }
    $log.warning(msg, data);
};

var success = function (msg, data, showtoast) {

    if (showtoast) {
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "positionClass": "toast-bottom-right",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        toastr.success(msg);
    }
    $log.info(msg, data);
};


var logger = {
    success: success,
    error: error,
    info: info,
    warning: warning

};
return logger;
}]);

My issue was that the top container holds all toasts. If they differ in style, then the first one rules. Calling toastr.remove() will clear everything immediately and reset the positioning. — Don Rolling, Feb 01 '17 at 16:08

score 1 · Answer 4 · edited Dec 09 '16 at 09:56

1

I can't seem to find version 2.0.3! The latest version is 1.4.1 see this

I ended up changing the hardcoded value for positionClass in 'angular-toastr.tpls.js'

Now it is centering correctly!

edited Dec 09 '16 at 09:56

Bharat

2,441
3
24
36

answered Jun 03 '15 at 19:57

Arnold.Krumins

1,055
8
8

score 0 · Answer 5 · answered Mar 14 '22 at 14:26

In my case position is not working becuase I am calling the toast before the options property:

Before

toastr["info"]("Testing Toast")

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

After

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

toastr["info"]("Testing Toast")

Changing positionclass for toastr Notification

5 Answers5

Linked