javascript - toastr js と SharePoint

Question

SharePoint 2013 で toastr js を使用して通知を表示しようとしています。toastr オプションに closebutton:true を追加するまで、すべてが見栄えがします。タイトル、メッセージ、閉じるボタンの配置が乱れますが、閉じるボタンが表示されます。実装で何が問題になっているのか考えていますか?

閉じボタン付き

閉じたボタンなし

Answer 1

これは、SharePoint ( ) がのプロパティをcore15.css宣言するために発生します:min-widthbutton

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

ソリューション

CSS:

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

jQuery:

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

結果

Answer 2

これはおそらく CSS の問題です。私の推測では、あなたのサイトのスタイルが toastr のスタイルに干渉していると思われます。Chrome 開発ツール (または使用するブラウザー ツール) でスタイルをチェックして CSS を調べ、問題の原因となっているスタイルを見つけ (オンとオフを切り替えて支援します)、作成することで修正できるはずです。問題をオーバーライドする新しいスタイル。