Search code examples
javascriptcsshtmlmaterialize

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.

Solution

  • 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 !important is is necessary otherwise materialize.css will override it
    • Using position:absolute; or position: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"/>