javascript - bootstrap - Materializar css-cambiar la posición del diálogo de brindis

navbar dropdown menu materialize

Question

Estoy utilizando materialise css (www.materializecss.com). Quiere cambiar la posición del diálogo de tostadas. En pantallas más pequeñas está en la posición correcta. Para el diseño de pantalla ancha y cuadro, va a la esquina derecha de mi diseño. ( http://materializecss.com/dialogs.html )

Cuando se activa el brindis, se agrega " <div id="toast-container"></div> " en el cuerpo. No quiero añadirlo en cuerpo. Lo quiero en div específico.

Answer 1

La posición del diálogo de brindis puede cambiarse configurando los valores predeterminados de #toast-container en auto con !important .

Por ejemplo, si desea la posición opuesta a la predeterminada en una pantalla de escritorio, cámbiela a:

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

• Usar !important es necesario de lo contrario materialize.css lo anulará
• Utilizando position:absolute; o position:fixed; no es necesario

Demostración de la versión 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

Para establecer la posición de la tostada en el centro del documento, puede agregar este estilo:

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

Answer 3

Si desea cambiar la posición del diálogo, puede usar directamente css para darle estilo.

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

El ''! Importante'' podría ser innecesario.

Answer 4

simplemente colóquelo en un div relativo, parece que la biblioteca no creará, agregue en el extremo del cuerpo si ya existe.

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