1

I'm using AngularJS Material and Toastr.

I've used bower to install both. They are working together except that the styling of the toastr is being overridden. So when I try to use toastr.warning(...) I get

Enter image description here

instead of getting something similar:

Enter image description here

The generated HTML head is:

<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/toastr/toastr.css">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
<link rel="stylesheet" href="../bower_components/materialize/bin/materialize.css">
<!-- endbower -->

It was working with Twitter Bootstrap before I moved to use AngularJS Material and Materialize.

Improve this question
4
  • did you check that toastr css was included by bower ? Commented Feb 4, 2015 at 1:50
  • yes it was included, but before the angular material css Commented Feb 4, 2015 at 1:50
  • Could you include code? Commented Feb 4, 2015 at 1:51
  • added the head code... it was working with twitter bootstrap 3 before I move to use angular material & materialize Commented Feb 4, 2015 at 1:57

1 Answer 1

Reset to default
1

Change the order of the bower.json file, so that toastr.css comes after angular-material and materialize.css.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.