Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Kneidels pro asked 5 years ago


Hi

I am following the examples of toastr notifications at https://mdbootstrap.com/docs/jquery/javascript/notifications/i see there are 2 designs - the "bootstrap" example and "material" example - which look very different. The bootstrap design looks much slicker i think,but i am using the following code (which i got from the official toastr docs): https://github.com/CodeSeven/toastr which seem to generate the more simple "material" example design:

    toastr.options.positionClass = 'toast-top-full-width';
toastr.options.extendedTimeOut = 0; //1000;
toastr.options.timeOut = 0;
toastr.options.fadeOut = 250;
toastr.options.fadeIn = 250;


toastr.options.positionClass = 'toast-bottom-left';
toastr['error']('bottom left',' title 1');


toastr.options.positionClass = 'toast-bottom-right';
toastr['success']('bottom right',' title 2');

How can I generate (vis the JS/jquery) a dynamic toastr, that looks more like the bootstrap design, and can still be done using the success/info/warning flavor?

UPDATE: since posting the above question, 4.7.4 has been published, and i am testing with it. using code such as the above, gives me toastr items with the class "md-toast md-toast-success" which seems to give me the default MDB styles. how do i default to the"standard" styles, eg: class="toast toast-success" ?

Thanks!


Marta Wierzbicka staff answered 5 years ago


Hi,

I'm not sure what I could create for you, but maybe this simple code for toast helps you to create your own advanced notification: https://mdbootstrap.com/snippets/jquery/marta-szymanska/440729.

Best, Marta


Marta Wierzbicka staff answered 5 years ago


Hi,

what means for you the "standard" styles for toast? Because bootstrap alerts and mdb alerts have completely different syntax and styles. Would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? I'll try to help you.

Best, Marta


Kneidels pro commented 5 years ago

Thanks for the help! here is my snippet: https://mdbootstrap.com/snippets/jquery/moshe/436752 you will see it uses the standard MDB styles for success/warning etc...

But thats because all the styles has the prefix of "md-" to them. if you were to remove that prefix, you would see that the styles are very different - based on the custom styles i have set in the CSS.

and my other question is how to obtain a design as you have at https://mdbootstrap.com/docs/jquery/javascript/notifications/ under the "bootstrap" example. that also is a much nicer design, but how would i get that using the JS code i have to trigger the toast?

Thank you



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.3
  • Device: PC
  • Browser: Firefox
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes