How to show md-toast with background color

All we need is an easy explanation of the problem, so here it is.

I am trying to create md-toast with having some background color to toast using angular-material. I using answers from this SO question, I created this codepen, but it is showing some unwanted background to toast as well.

HTML:

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <p>
    Toast is not properly working with theme defined in CSS.
    <br>
  </p>

  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-button ng-click="showSimpleToast()">
      Toast
    </md-button>
  </div>    
</div>

CSS:

md-toast.md-success-toast-theme {
    background-color: green;
}

md-toast.md-error-toast-theme {
    background-color: maroon;
    position: 'top right'
}

md-toast {
    height: 40px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    left: 0; right: 0;
    top:10px;
}

JS:

angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $mdToast, $document) {
  $scope.showSimpleToast = function() {
    $mdToast.show(
      $mdToast.simple()
        .textContent('Simple lala Toast!')
      .theme('success-toast')
        .hideDelay(3000)
    );
  };
})

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Positioning the toast

Instead of giving a position to everything (which makes the cutting of your toast), you can position only the md-toast to the right position.

By the documentation, there are four location where you can officially put the toast: top left, top right, bottom left, bottom right. So, first, lets position the toast to top left (this is important for the change in animation. Also, this will allow us to show toasts on bottom center as well).

$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('top')

now, in the css, just position your toast:

md-toast {
  left: calc(50vw - 150px);
}

This will position the toast at the center of the viewport, minus half of the toast.

you can also show toasts on the bottom center by javascript alone:

$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('bottom')

and the toast will center at the bottom and use the right animation to show it.

Coloring the toast

You colored the toast’s container instead of the actual content of the toast. To color the toast, you can add the following css styling:

md-toast.md-success-toast-theme .md-toast-content {
  background-color: green;
}

You can change the toast’s theme to not override the default toast styling. Also, changing the position for a specific theme can help use both positions (default and manual) at the same time (by changing theme).

md-toast.md-thatkookooguy-toast-theme {
  left: calc(50vw - 150px);
}

Here’s a working FORK of you codepen.

Method 2

.toastClass(string) Sets a class on the toast element

Define css:

.md-toast-done .md-toast-content{
    background: #004f75 !important;
}

.md-toast-error .md-toast-content{
    background: rgb(193, 30, 23) !important;
}

And define toast:

    $mdToast.show(
        $mdToast.simple()
            .toastClass('md-toast-error')
            .textContent(stringValue)
            .position('bottom right')
            .hideDelay(3000)
    );

Method 3

When using

$mdToast.simple().theme('sometheme');

A warning occurs in the console that the specified theme has not been defined. Better is to use the toastClass attribute.

var message = "An error occured!";
$mdToast.show($mdToast.simple({
  hideDelay: 126000,
  position: 'top right',
  content: message,
  toastClass: 'error'
}));

SCSS:

$red: rgb(244, 67, 54);
$green: rgb(76, 175, 80);

md-toast {
  &.error {
    .md-toast-content {
      background: $red;
      color: white;
    }
  }
  &.success {
    .md-toast-content {
      background: $green;
      color: white;
    }
  }
}

Working example Codepen

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply