Дублированные значки с тостром

У меня есть несколько значков друг над другом в сообщении toastr. Вот как это выглядит:

введите описание изображения здесь

Мой код очень прост, я использую toastr после вызова Ajax:

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

У меня такая же проблема, независимо от типа (ошибка, информация, предупреждение, успех). Что происходит не так?


toastr
person Dom    schedule 24.01.2016    source источник
comment
Проблема в том, что есть несколько значков, перекрывающих друг друга?   -  person Pekka    schedule 24.01.2016
comment
Да, конечно. Не понимаю, почему.   -  person Dom    schedule 24.01.2016
comment
проблема решена. Я использую шаблон inspinia, и CSS уже объявлен в этом шаблоне. Так что не надо было дублировать стиль css в html файле. Теперь он работает нормально. Извините и спасибо за ваш вопрос. Мерси. Доминик   -  person Dom    schedule 24.01.2016
comment
Без проблем! Это может случиться с кем-то еще в будущем, поэтому вопрос, возможно, стоит сохранить. Вы можете опубликовать ответ самостоятельно, как только сможете. Я отредактирую заголовок, чтобы немного прояснить проблему.   -  person Pekka    schedule 24.01.2016
comment
@Pekka웃 этот вопрос помог мне. Если бы его не существовало, я бы, наверное, потерял пару часов, пока не разобрался с этим. Спасибо!   -  person Alisson    schedule 16.07.2016

Ответы (9)


arrow_upward
20
arrow_downward

Еще один способ решить эту проблему — загрузить css-файл toastr перед загрузкой css-файла inspinia. Таким образом, Inspinia перезаписывает тостр css своим собственным css.

person Hibbem    schedule 21.03.2016
comment
Это решение сработало для меня и позволило сохранить другие параметры конфигурации. - person Juan Pablo Ugas; 26.09.2016

arrow_upward
13
arrow_downward

Проблема решена.

Я использую фреймворк inspinia. в его таблице стилей уже есть какое-то объявление css о toastr :

введите описание изображения здесь

Я прокомментировал эти несколько строк, и теперь все работает нормально. Не знаю, ошибка это или нет на стороне "inspinia".

Доминик

person Dom    schedule 24.01.2016
comment
Это решение будет утеряно после обновления Inspinia. Решение @Reyske работает для меня и не перезаписывает стиль Inspia по умолчанию. - person Strabek; 19.11.2016

arrow_upward
4
arrow_downward

У меня была такая же проблема, я проверил свои справочные ссылки на свой css и обнаружил, что вызываю css "toastrStyles" после css "inspania". Я перешел к вызову своего css "toastrStyles" перед вызовом css "inspania", и это сработало для меня.

person Ilham Ibrahimkhalilov    schedule 14.12.2017
comment
Пожалуйста. И вы также можете удалить ненужные комментарии ;-) - person GhostCat; 15.12.2017

arrow_upward
3
arrow_downward

Похоже, вы используете значки с потрясающим шрифтом вместе со значками по умолчанию.

Добавление этого в ваш css должно исправить перекрывающиеся значки, скрыв изображение по умолчанию.

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

Также, если вы хотите вертикально центрировать свое изображение, добавьте

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

arrow_upward
2
arrow_downward

Ничего нельзя сделать ни с одной из настроек css. Просто сохраните свой toastr css сразу после boostrap (если используете) и перед любыми другими ссылками css. Он будет работать без каких-либо проблем.

нравится это:

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

....остальные ссылки здесь после.....приходит

person Praveen Kumar Rejeti    schedule 19.04.2017

arrow_upward
0
arrow_downward

У меня была такая же проблема с Inspinia. Причина в том, что я загрузил файл css toastr после файла css inspinia (style.css), в результате чего css toastr перезаписал стили inspinia.

person Stein-Magne Pedersen    schedule 03.10.2016

arrow_upward
0
arrow_downward

В моем случае изменение порядка импорта css вообще не помогло. Если это произойдет и с вами, вы можете переопределить классы:

#toast-container > .toast-error:before {
  content: none;
}

#toast-container > .toast-success:before {
  content: none;
}

Это похоже на ответ @Dom, но без изменения самого кода inspinia или toastr.

person Sherrmenise    schedule 07.11.2019

arrow_upward
0
arrow_downward

загружая toastr css перед любым другим css, исправьте эту проблему для меня.

person Ashif    schedule 07.07.2020

arrow_upward
-1
arrow_downward

используйте ng7-snack-bar https://angular-4hvr9p.stackblitz.io 4 разных состояния, ранг и избегайте дубликатов. Автозакрытие при переходе. АОТ

person Sherin Dharmarajan    schedule 19.11.2018