CODEWITHSUNDEEP
angular8ng-bootstrap
codeDabbling
codeDabbling

Reputation: 71

Change position of toast in ng-bootstrap

Following the example here: https://stackblitz.com/run?file=app/toast-global.component.ts, we have implemented a global toast service in Angular 8. By default, this seems to be appearing from the top right corner of the screen, however we would like to change the positioning to the bottom left. Creating a custom CSS class for ngb-toasts with ": host" did not override the default "ngb-toasts" class.

Custom CSS:

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

Any pointers on this would super appreciated!

Upvotes: 0

Views: 9537

Answers (5)

Saleh Khademi
Saleh Khademi

Reputation: 25

You can use #toast-container to set custom styles to the toastr container, for example:

#toast-container {
    position: fixed;
    top: auto!important;
    bottom: 0!important;
    right: 0!important;
    left: auto!important;
    margin: 0.5em;
}

Upvotes: 0

romal tandel
romal tandel

Reputation: 501

I used following in angular 9.

::ng-deep .ngb-toasts {
  position: fixed;
  top: auto!important;
  bottom: 0!important;
  right: 0!important;
  left: auto!important;
  margin: 0.5em;
}

Upvotes: 0

Luis Menendez
Luis Menendez

Reputation: 21

This works for me:

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

If you are following the https://ng-bootstrap.github.io/#/components/toast/examples it's important to notice that there, the "toasts-container.component.ts" file don't have styles. You need to add this code there or bind a "toasts-container.component.scss" file with it.

Upvotes: 2

GD19
GD19

Reputation: 11

To position the toast to the upper right corner you can take styles from Bootstrap 4 toast and add ngb-toast inside. Create classes for inline styles if required.

<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>

Reference URL:

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

Upvotes: 0

Jon Gourley
Jon Gourley

Reputation: 1

I was trying to do the same thing (have toasts appear somewhere other than top-right) and I found a very ridiculous way of making this work.

I wanted my toasts to show up on the bottom right, so what I did was use

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

on the toast container, and then for the class that styles the content of the toast, I used transform: scaleY(-1); to flip the toast content so they are not upside down. Not really ideal but I'm not aware of any other way to change where these toasts show up.

Upvotes: 0

Related Questions