webentwicklung-frage-antwort-db.com.de

Materialise css - Position des Toast-Dialogs ändern

Ich verwende Materialise css (www.materializecss.com). Möchten Sie die Position des Toast-Dialogs ändern. Bei kleineren Bildschirmen befindet es sich in der richtigen Position. Für Breitbild- und Boxlayout wird es in die rechte Ecke meines Layouts verschoben. ( http://materializecss.com/dialogs.html )

Wenn ein Toast ausgelöst wird, wird "<div id="toast-container"></div>" im Hauptteil angehängt. Ich möchte es nicht im Körper anhängen. Ich will es in bestimmten div.

javascripthtmlcsshtml5materialize
16
Manish Rane

Die Position des Toastdialogs kann geändert werden, indem die Standardwerte von #toast-container Mit !important Auf auto gesetzt werden.

Wenn Sie beispielsweise die entgegengesetzte Position der Standardeinstellung auf einem Desktop-Bildschirm möchten, ändern Sie diese in:

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;  
}
  • Die Verwendung von !important Ist ist erforderlich, andernfalls überschreibt materialize.css Dies
  • Die Verwendung von position:absolute; Oder position:fixed; Ist nicht erforderlich

Demo von Version 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"/>
31
NiZa

Um die Toastposition in der Mitte des Dokuments festzulegen, können Sie diesen Stil hinzufügen:

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

Wenn Sie die Position des Dialogfelds ändern möchten, können Sie css direkt verwenden, um es zu formatieren. 

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

Das '! Wichtige' könnte unnötig sein. 

1
asker

werfen Sie es einfach in ein relatives div, es sieht so aus, als würde lib es nicht schaffen, es in den Body-End hinzuzufügen, wenn es bereits existiert. 

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