Search code examples
javascriptsharepoint-2013toastr

toastr js with SharePoint

I am trying to use toastr js in SharePoint 2013 to show notifications. Everything looks great until I add closebutton:true in toastr option. Close button appears though the alignment gets distorted for the title, message and the close button. Any idea what is going wrong with the implementation?

With closed button With closed button

without closed button without closed button

enter image description here

Solution

  • It occurs since SharePoint (core15.css) declares min-width property for button: 

    input[type=button], input[type=reset], input[type=submit], button {
   min-width: 6em;
}

    Solutions

    CSS:

    button.toast-close-button {
  min-width: 0;
}

    jQuery:

    $('button.toast-close-button').css('min-width',0);

    Result

    enter image description here