Materialize css - изменить положение диалога тостов

Я использую Materialize css (www.materializecss.com). Хотите изменить положение диалога тостов. На небольших экранах он находится в правильном положении. Для широкоэкранного и коробочного макета он выходит в правый угол из моего макета. (http://materializecss.com/dialogs.html)

Когда тост запускается, он добавляет "<div id="toast-container"></div>" в тело. Я не хочу добавлять его в тело. Я хочу его в конкретном div.

Ответ 1

Положение диалога тоста можно изменить, установив значения dafault от #toast-container до auto с помощью !important.

Например, если вы хотите иметь противоположную позицию по умолчанию на экране рабочего стола, измените ее на:

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

Ответ 2

Если вы хотите изменить положение диалога, вы можете напрямую использовать css для его стиля.

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

"Важно" может быть ненужным.

Ответ 3

просто выбросьте его в относительный div, похоже, что lib не будет создавать его добавление в конец тела, если он уже существует.

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