Materialize css – change position of toast dialog
I am using Materialize css (www.materializecss.com). Want to change position of toast dialog. In smaller screens it is on proper position. For wide screen and box layout it goes to right corner out of my layout. (http://materializecss.com/dialogs.html)
When toast get triggered, it appends “<div id="toast-container"></div>” in body. I don’t want to append it in body. I want it in specific div.
The position of the toast dialog can be changed by setting the dafault values of #toast-container to auto with !important.
For example, if you want the opposite position of the default on a desktop screen, change it to:
#toast-container {
top: auto !important;
right: auto !important;
bottom: 10%;
left:7%;
}
- Using
!importantis is necessary otherwisematerialize.csswill override it - Using
position:absolute;orposition:fixed;is not necessary
Demo of 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"/>To set toast position at center of the document, you can add this style:
#toast-container {
min-width: 10%;
top: 50%;
right: 50%;
transform: translateX(50%) translateY(50%);
}
If you want to change the position of the dialog, you can directly use css to style it.
#toast-container {
position: fixed !important;
bottom: 0px !important;
left: 0px !important;
}
The ‘!important’ might be unnecessary.
just throw it into a relative div, it looks like that lib will not create add it into the body end if it already exists.
<div style="position: relative">
....
<div id="toast-container"></div>
</div>
