change the position of toast service

Topic: change the position of toast service

She Jong Shon pro asked 4 years ago

How do I manually re-position the toast message? It shows it on the top-right where it overrides with the navigation bar. So I want to move it a bit down from the top.
this.toastrService.success('Logged in');

Arkadiusz Idzikowski staff answered 4 years ago

Hello, You would need to add custom position class with toast options. Here is how to do that:
showSuccess() {

constoptions= { positionClass:'toast-custom' };

this.toastrService.success('Hello world!', 'Toastr success!', options);

.toast-custom {

top: 80px;

right: 0px;


Please insert min. 20 characters.


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



Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: web
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: Yes
  • Provided link: No