Christmas Sale! Limited Time Only - Enjoy 30% Off Metronic Extended License!
Buy for 669$  969$

toastr css problem on v8.2.0


Dear Support,

Seems the generated toastr css was wrong using version 8.2.0, all missed "r" for "toastr" in below css:
https://crm-dev2.clickcola.com/js/metronic/demo1/dist/assets/plugins/global/plugins.bundle.css?1690454408

.toast-title {
font-weight: bold;
}
.toast-message {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.toast-message a,
.toast-message label {
color: #FFFFFF;
}
.toast-message a:hover {
color: #CCCCCC;
text-decoration: none;
}
.toast-close-button {
position: relative;
right: -0.3em;
top: -0.3em;
float: right;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
-webkit-text-shadow: 0 1px 0 #ffffff;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
line-height: 1;
}
.toast-close-button:hover,
.toast-close-button:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
}

Please help check as now toastr can't show, thanks.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


Hi,

I'm having the same issue using "Craft" theme v 1.1.3

Do you know when this will be fixed?

Thank you.



Dear Sean,

I have upgraded to v8.2.0 from v8.1.5 recently and found "Toastr" (not toasts) css not applied, thanks.



Hi,

Can you use Toastr in the v8.2.0 original templates? The issue is in your build? Which build method(gulp or webpack) do you use?

Regards.



Hi Sean,

Toastr actually works for js part but with distorted css.

I'm using webpack to build.

Thanks.



Hi,

Appreciate your clarification.

We will provide a quick fix shortly. We are checking this issue for Metronic v8.2.0 webpack build.

Regards.



Hi,

We have found the issue and fixed it for the webpack build. We will add this fix in the next update Metronic v8.2.1 asap.

In the meantime, you can apply the fix by editing the webpack CSS build config in tools/webpack/plugins/plugins.scss


@import "~@/src/plugins/toastr/build/toastr.css";


Then recompile the assets with webpack-built task.

Please let us know if it worked well for you.

Regards.



It works now, thanks for helping.



Hi happy,

Great! Thanks for your contribution as well.

You are most welcome! If you need any further help please do let us know.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi,

We have 2 Toast components. Bootstrap Toasts and Toastr

Both should be working fine if we fully integrated v8.2.0.

If you need any further help could you please provide us with more info? Your current Metronic version, and if you included the latest v8.2.0 fully.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(