Materializza css - cambia la posizione della finestra di dialogo toast

Sto usando Materialise css (www.materializecss.com). Vuoi cambiare la posizione della finestra di dialogo del toast. In schermi più piccoli è in posizione corretta. Per lo schermo ampio e il layout della scatola, esso va a destra fuori dal mio layout. (http://materializecss.com/dialogs.html)Materializza css - cambia la posizione della finestra di dialogo toast

Quando il toast viene attivato, aggiunge "<div id="toast-container"></div>" nel corpo. Non voglio aggiungerlo nel corpo. Lo voglio in div specifico

fonte

2015-11-06 Manish Rane

Ci può fornire con un po 'di codice in modo che possiamo aiutarvi ... –

Controllare http://materializecss.com/dialogs.html, Puoi trovare la demo. Voglio un esempio di toast sulla posizione specifica –

Le domande che richiedono la guida del codice devono includere il codice più breve necessario per riprodurlo ** nella domanda stessa **. Vedi [** Come creare un esempio Minimo, Completo e Verificabile **] (http://stackoverflow.com/help/mcve) –

La posizione della finestra di dialogo del tostapane può essere modificata impostando i valori predefiniti da #toast-container a auto con !important.

Ad esempio, se si desidera che la posizione opposta di quello predefinito su uno schermo del desktop, modificarla in:

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

utilizzando !important è è necessario altrimenti materialize.css sarà ignorarlo
Utilizzando position:absolute; o position:fixed; è non necessario

demo della versione 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"/>

fonte

2016-04-07 07:48:05 NiZa

Se vuoi spostare il toast in alto a destra, devi effettivamente usare 'bottom: auto! Important;' e 'left: auto! Important;' oppure saranno sovrascritti dai valori predefiniti da materialize.css. –

Hai ragione. Non ho realizzato che la demo viene visualizzata su uno schermo più piccolo. Grazie per il vostro feedback Modificata la risposta. – NiZa

Se si desidera modificare la posizione della finestra di dialogo, è possibile utilizzare direttamente CSS per adattarlo.

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

"Importante" potrebbe non essere necessario.

fonte

2015-11-12 11:39:18 asker

Non è necessario specificare 'position: fixed' come è già stato definito per' # toast-container' all'interno degli stili materializecss. Ma devi sostituire la proprietà 'top' di default per evitare che venga applicata in combinazione a' bottom'. Per rimuoverlo: 'top: inherit! Important;' –

semplicemente buttare in un div relativa, sembra che lib non creerà aggiungerlo nella parte finale del corpo, se esiste già.

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

fonte

2016-04-11 19:07:01 user2174835

Questo non funzionerà anche senza impostare # toast-container in '' 'position: absolute''', dato che' 'position: fixed''' ignorerà il posizionamento genitore. – mygzi

Materializza css - cambia la posizione della finestra di dialogo toast

risposta

Problemi correlati