By default, the positions of the new toasts are only updated after the visible toasts have been destroyed. If You need to display multiple toasts with different positions, initiate another toasts.
The following sample demonstrates adding multiple toasts in different positions.
ej.base.enableRipple(true);
//Initialize Toast component
var toast = new ej.notifications.Toast({
title: 'Matt sent you a friend request',
content: 'You have a new friend request yet to accept',
target: document.body,
position: { X: 'Right', Y: 'Bottom' },
click: onClick
});
toast.appendTo('#element');
toast.show();
var toast1 = new ej.notifications.Toast({
title: 'Matt sent you a friend request',
content: 'You have a new friend request yet to accept',
target: document.body,
position: { X: 'Left', Y: 'Bottom' },
click: onClick
});
toast1.appendTo('#element1');
toast1.show();
document.getElementById('show_toast').onclick = function () {
toast.show();
};
document.getElementById('show_toast1').onclick = function () {
toast1.show();
};
function onClick(e ) {
e.clickToClose = true;
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toast</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Toolbar Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="row"> <button class="e-btn" id="show_toast">Show Right Position Toast</button> </div>
<div class="row"> <button style="margin-left: 10px;" class="e-btn" id="show_toast1">Show Left Position Toast</button> </div>
<div id="element"></div>
<div id="element1"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>