英文:
Toastr Notification not showing green background and top right
问题
You can move the notification to the top right by updating the positionClass option for toastr. In your code, you have already set positionClass to "toast-top-right" for both success and error notifications. However, you mentioned that it's still showing in the bottom left.
Make sure you have included the toastr CSS and JavaScript correctly, and there are no conflicting styles or scripts that might be affecting the position. Check your browser's developer console for any errors that might provide clues.
If you've done all of this and it's still not working as expected, please double-check your layout.cshtml and any other parts of your application that might be affecting the position of toastr notifications.
英文:
I'm watching a video for learn asp.net core.I'm trying to use toastr notifications (https://github.com/CodeSeven/toastr) its working fine but the problem is that they only appear at the left bottom. I changed anything about the position, but they will always show at the bottom left.
@if (TempData["success"] != null)
{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script type="text/javascript">
toastr.success('@TempData["success"]');
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
</script>
}
@if (TempData["error"] != null)
{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script type="text/javascript">
toastr.error('@TempData["error"]');
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
</script>
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - BulkyBookWeb</title>
<link rel="stylesheet" href="~/css/bootswatchTheme.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stlyesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
i added link to layout.cshtml
its my application
this is what i want it to be 
How can I move the notification to the top right?
i changed newestOnTop: true; but it still showing left bottom
答案1
得分: 0
I find the reason, a spelling mistake in rel="stlyesheet":
<link rel="stlyesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
Change it to
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
result:
英文:
I find the reason, a spelling mistake in rel="stlyesheet":
<link rel="stlyesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
Change it to
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
result:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论