CODEWITHSUNDEEP
javascriptsharepoint-2013toastr
user12345
user12345

Reputation: 261

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

Upvotes: 1

Views: 1286

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59378

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

Upvotes: 2

John Papa
John Papa

Reputation: 22338

This is likely a CSS issue. My guess is that some style on your site is interfering with the styles in toastr. You should be able to fix it by checking the styles in the Chrome Dev Tools (or whatever browser tools you use) to inspect the CSS, find the style that is causing the issue (toggle them on and off to help), and then create a new style to override the problem.

Upvotes: 2

Related Questions