Question

我正在使用Materialise css（www.materializecss.com）。想要改变吐司对话的位置。在较小的屏幕中，它处于适当的位置。对于宽屏幕和盒子布局，它会从我的布局中转到右上角。（Github）

当吐司被触发时，它会在正文中添加“<div id="toast-container"></div>”。我不想把它贴在身上。我想要特定的div。

Answer 1

使用#toast-container将auto的dafault值设置为!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 2

要设置文档中心的Toast位置，您可以添加以下样式：

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

Answer 3

If you want to change the position of the dialog, you can directly use css to style it.

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

The '!important' might be unnecessary.

Answer 4

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

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

实现css - 改变吐司对话框的位置

4 个答案: