Question

187

Materialize css - change position of toast dialog

rated 0 times [ 190] [ 3] / answers: 1 / hits: 36548 / 9 Years ago, fri, november 6, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mira

Add To Favorites

Follow

Total Points: 460

Total Questions: 108

Total Answers: 99

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

mira questions

1 Nodemon: app crashed waiting for file changes before starting... on Windows

Mon, Apr 4, 22, 00:00, 2 Years ago

1 Unhandled promise rejection: ReferenceError Can't find variable

Mon, Feb 14, 22, 00:00, 2 Years ago

1 momentjs datetime format on frontend with angular

Wed, Feb 9, 22, 00:00, 2 Years ago

1 How to check if element exists in DOM in Cypress?

Sun, Mar 28, 21, 00:00, 3 Years ago

1 How do I get the IP of a user in Nuxt's asyncData method?

Sat, Aug 3, 19, 00:00, 5 Years ago

View All

answered 9 Years ago averyc · Accepted Answer

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