Materialise css - 更改 toast 对话框的位置

Question

我正在使用 Materialise css (www.materializecss.com)。想要更改 toast 对话框的位置。在较小的屏幕上，它位于正确的位置。对于宽屏和盒子布局，它会出现在我布局的右上角。 (http://materializecss.com/dialogs.html)

当 toast 被触发时，它会在正文中附加“<div id="toast-container"></div>”。我不想将它附加到正文中。我想要具体 div.

Answer 1

如果你想改变对话框的位置，你可以直接使用css来设置样式。

#toast-container {
    position: fixed !important;
    bottom: 0px !important;
    left: 0px !important;
}

'!important' 可能是不必要的。

Answer 2

可以通过将 #toast-container 的默认值设置为 auto 和 !important 来更改 toast 对话框的位置。

例如，如果您想要桌面屏幕上默认位置的相反位置，请将其更改为：

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;  
}

使用 !important 是是必要的，否则 materialize.css 将覆盖它
使用 position:absolute; 或 position:fixed; 不需要

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"/>

Answer 3

只是把它扔到一个相对的 div 中，如果它已经存在，看起来 lib 不会创建将它添加到主体端。

<div style="position: relative">
....
<div id="toast-container"></div>
</div>

Answer 4

要将 toast 位置设置在文档的中心，您可以添加此样式：

#toast-container {
    min-width: 10%;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(50%);
}

Materialise css - 更改 toast 对话框的位置

Materialize css - change position of toast dialog

html

javascript

css

materialize