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.

Check http://materializecss.com/dialogs.html, You will find the demo. i want toast example on specific position — Manish Rane, Nov 06 '15 at 12:17
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**](http://stackoverflow.com/help/mcve) — Paulie_D, Nov 06 '15 at 12:44
I'm interested by an answer to this **very clear** question. — G. Ghez, Jan 21 '16 at 14:07
ManishRane if @NiZa's answer was helpful, please mark it as accepted. :) — tftd, Dec 07 '16 at 02:25

NiZa · Accepted Answer · 2016-07-05T07:59:03.510

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

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. — Levi Fuller, Jul 04 '16 at 20:51
You are right. I did'nt realize that the demo is showing on a smaller screen. Thanks for your feedback. Changed the answer. — NiZa, Jul 05 '16 at 08:00

score 3 · Answer 2 · answered Jun 09 '18 at 00:18

3

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

answered Jun 09 '18 at 00:18

Alexander Goncharov

1,572
17
20

score 1 · Answer 3 · answered Nov 12 '15 at 11:39

1

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.

answered Nov 12 '15 at 11:39

asker

46
4

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;` – G. Ghez Jan 21 '16 at 14:13

score 0 · Answer 4 · answered Apr 11 '16 at 19:07

0

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>

answered Apr 11 '16 at 19:07

user2174835

357
3
11

This won't work without also setting #toast-container to ```position: absolute```, as ```position: fixed``` will ignore parent positioning. – mygzi Sep 01 '16 at 17:52

Materialize css - change position of toast dialog

4 Answers4