Biểu tượng trùng lặp với toastr

Question

Tôi có một số biểu tượng trên đầu trang của nhau trong một thông báo toastr. Đây là những gì nó trông giống như:

Mã của tôi rất đơn giản, tôi sử dụng toastr sau khi một cuộc gọi Ajax:

success  : function(reponse) { 
      $(event.target).next('i').hide(); 
      if (reponse.retour == 0){ 
       toastr["success"](reponse.texte_retour); 
       } else { 
       toastr["error"](reponse.texte_retour); 
       } 
     } 

Tôi có cùng một vấn đề gì loại (lỗi, thông tin, cảnh báo, thành công). Chuyện gì vậy?

Answer 1

Sự cố được giải quyết.

Tôi sử dụng 'inspinia khuôn khổ'. trong style sheet của nó đã có là tuyên bố css Somme về toastr:

tôi nhận xét này vài dòng và bây giờ nó hoạt động tốt. Không biết nếu nó là một lỗi hay không ở phía "inspinia".

Dominique

Answer 2

Có vẻ như bạn đang sử dụng biểu tượng phông chữ tuyệt vời cùng với các biểu tượng mặc định.

Việc thêm phần này vào css của bạn nên sửa các biểu tượng chồng chéo bằng cách ẩn hình ảnh mặc định.

#toast-container > div.toast { 
    background-image: none !important; 
} 

Ngoài ra nếu bạn muốn vertical center hình ảnh của bạn thêm

#toast-container > .toast:before { 
    position: absolute; 
    margin: auto 1.5em auto -1.5em; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 3

Một cách khác để giải quyết vấn đề này là để nạp css toastr trước khi bạn nạp css inspinia. Bằng cách này, Inspinia sẽ ghi đè lên css toastr bằng css tùy chỉnh của riêng mình

Answer 4

Tôi gặp vấn đề tương tự với Inspinia. Lý do là tôi tải tập tin css toastr sau khi các tập tin css inspinia (style.css) gây ra các toss css để ghi đè lên các phong cách inspinia.

Answer 5

Không cần làm gì với bất kỳ tùy chỉnh css nào.Chỉ cần giữ của bạn để css ngay lập tức sau khi tăng cường (nếu sử dụng) và trước bất kỳ liên kết css nào khác. Tôi sẽ làm việc mà không có bất kỳ vấn đề gì.

thích này:

<link href="~/Content/bootstrap.min.css" rel="stylesheet"> 
<link href="~/Content/plugins/toastr/toastr.min.css" rel="stylesheet"> 

.... còn lại liên kết ở đây sau khi ..... nói

Answer 6

tôi đã cùng một vấn đề, tôi đã kiểm tra các liên kết tham khảo của tôi để css của tôi, tôi thấy rằng tôi đã gọi css "toastrStyles" sau khi "inspania" css. Tôi di chuyển gọi css "toastrStyles" của tôi trước khi gọi css "inspania", và nó làm việc cho tôi.