Javascript Materialize css - 更改吐司对话框的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33566041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize css - change position of toast dialog
提问by Manish Rane
I am using Materialize css (www.materializecss.com). Want to change position of toast dialog. In smaller screens it is on proper position. For wide screen and box layout it goes to right corner out of my layout. (http://materializecss.com/dialogs.html)
我正在使用 Materialize css (www.materializecss.com)。想要更改吐司对话框的位置。在较小的屏幕中，它位于正确的位置。对于宽屏和框布局，它位于我布局的右上角。( http://materializecss.com/dialogs.html)
When toast get triggered, it appends "<div id="toast-container"></div>" in body. I don't want to append it in body. I want it in specific div.
当 toast 被触发时，它会<div id="toast-container"></div>在 body 中附加“ ”。我不想将它附加到正文中。我想要它在特定的 div 中。
回答by NiZa
The position of the toast dialog can be changed by setting the dafault values of #toast-containerto autowith !important.
吐司对话框的位置可以通过设置的dafault值被改变#toast-container到auto与!important。
For example, if you want the opposite position of the default on a desktop screen, change it to:
例如，如果您希望桌面屏幕上的默认位置相反，请将其更改为：
#toast-container {
top: auto !important;
right: auto !important;
bottom: 10%;
left:7%;
}
- Using
!importantis isnecessary otherwisematerialize.csswill override it - Using
position:absolute;orposition:fixed;is notnecessary
- 使用
!importantIS是必需的，否则materialize.css会将其覆盖 - 使用
position:absolute;或者position:fixed;是没有必要的
Demo of version 0.97.6
0.97.6 版本演示
Materialize.toast('I am a toast!', 4000);#toast-container {
top: auto !important;
right: auto !important;
bottom: 10%;
left:7%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>回答by Alexander Goncharov
To set toast position at center of the document, you can add this style:
要将 toast 位置设置在文档的中心，您可以添加以下样式：
#toast-container {
min-width: 10%;
top: 50%;
right: 50%;
transform: translateX(50%) translateY(50%);
}
回答by asker
If you want to change the position of the dialog, you can directly use css to style it.
如果你想改变对话框的位置，你可以直接使用css来设置样式。
#toast-container {
position: fixed !important;
bottom: 0px !important;
left: 0px !important;
}
The '!important' might be unnecessary.
'!important' 可能是不必要的。
回答by user2174835
just throw it into a relative div, it looks like that lib will not create add it into the body end if it already exists.
只需将它扔到一个相对的 div 中，如果它已经存在，看起来 lib 不会创建将它添加到 body 端。
<div style="position: relative">
....
<div id="toast-container"></div>
</div>
