it-roy-ru.com

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

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

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

16
Manish Rane

Положение диалогового окна всплывающего окна можно изменить, установив значения по умолчанию для #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"/>

26
NiZa

Чтобы установить положение тоста в центре документа, вы можете добавить этот стиль:

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

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

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

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

1
asker

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

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