Изменить положение тоста в нг- bootstrap

Question

Следуя примеру здесь: https://stackblitz.com/run?file=app / toast-global.component.ts , мы реализовали глобальную службу тостов в Angular 8. По умолчанию это выглядит сверху правый угол экрана, однако мы хотели бы изменить положение на нижний левый. Создание настраиваемого класса CSS для ngb-toasts с ": host" не отменяет класс "ngb-toasts" по умолчанию.

Custom CSS:

:host .ngb-toasts {
    left: 0 !important;
    bottom: 0 !important;
}

Любые указатели на этом был бы супер признателен!

Answer 1

Чтобы разместить тост в правом верхнем углу, вы можете взять стили из Bootstrap 4 тоста и добавить внутрь ngb-toast. При необходимости создайте классы для встроенных стилей.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px; z-index: 1;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">
    <ngb-toast header="Hello" [autohide]="false">
      I am a simple static toast with a header.
    </ngb-toast>
  </div>
</div>

Ссылочный URL:

1. https://getbootstrap.com/docs/4.3/components/toasts/
2. https://ng-bootstrap.github.io/# / components / toast / examples

Answer 2

Это работает для меня:

:host {
    position: fixed;
    top: auto!important;
    bottom: 0!important;
    right: auto!important;
    left: 0!important;
    margin: 0.5em;
    z-index: 1200;
}

Если вы следуете https://ng-bootstrap.github.io/# / components / toast / examples , важно заметить, что там «toasts-container. component.ts "не имеет стилей. Вам нужно добавить туда этот код или связать с ним файл «toasts-container.component.s css».

Answer 3

Я пытался сделать то же самое (тосты появлялись где-то не в правом верхнем углу) и нашел очень нелепый способ сделать это.

Я хотел, чтобы мои тосты появлялись внизу правильно, поэтому я использовал

transform: scaleY(-1);
bottom: -100vh;
position: absolute;

в контейнере тоста, а затем для класса, который стилизует содержимое тоста, я использовал transform: scaleY(-1);, чтобы перевернуть содержимое тоста, чтобы они не были вверху вниз. Не совсем идеально, но я не знаю другого способа изменить место появления этих тостов.