Topic: toastr design
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 Szymanska staff pro premium answered 6 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 6 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
Marta Szymanska staff pro premium answered 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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