Materialize css - change position of toast dialog

Question

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 1

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"/>

Solution 2

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%);
}

Solution 3

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.

Comments

[C.Schubert]

Can you provide us with some code so we can help you...

[Manish Rane]

Check materializecss.com/dialogs.html, You will find the demo. i want toast example on specific position

[Paulie_D]

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example

[G. Ghez]

I'm interested by an answer to this very clear question.

[tftd]

ManishRane if @NiZa's answer was helpful, please mark it as accepted. :)

[G. Ghez]

Not required to specify position: fixed as it is already defined for #toast-container inside materializecss styles. But you have to replace top property by default one to avoid it applied in combination to bottom. To remove it: top: inherit !important;

[Levi Fuller]

If you want to move the toast to the top right, you actually do need to use bottom: auto !important; and left: auto !important; or else they will be overridden by the default values from materialize.css.

[NiZa]

You are right. I did'nt realize that the demo is showing on a smaller screen. Thanks for your feedback. Changed the answer.

[mygzi]

This won't work without also setting #toast-container to position: absolute, as position: fixed will ignore parent positioning.