saurabh saurabh - 3 months ago 99
AngularJS Question

How to show md-toast with background color

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

Answer

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 were 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;
}

Here's a working FORK of you codepen.

Comments