toast which always displays in white despite the color chang


Topic: toast which always displays in white despite the color change,

Moulay JAMAL EL AMRANI pro premium priority asked 2 years ago

Expected behavior Hello,

I have a problem with the toast component which always displays in white despite the color change,

my second problem is that I never received my git link to be able to generate the token. so I used the library I received at menu level https://mdbootstrap.com/profile/my-orders/

is there a way to get team or skype assistance for example just to clarify my need and to see if I have purchased the right library and the right version.

Cordially Jamal EL AMRANI

i user : "mdb-angular-ui-kit": "file:mdb-angular-ui-kit-2.3.0.tgz", Actual behavior enter image description here

<div
    class="toast toast-danger mx-auto"
    id="basic-primary-example"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"

> erreur {{date_jour}}

{{ text }}


Adam Jakubowski staff pro premium priority commented 2 years ago

Hello,

The support forum is dedicated to technical questions.

All questions regarding MDB licensing, products, partnerships and other non-technical queries - it should be asked directly to contact@mdbootstrap.com

I've reached out to you via the email address assigned to your mdbootstrap account.

Keep coding


Arkadiusz Idzikowski staff answered 2 years ago

The new classes like toast-danger were added in version 3.0.0, previously we used bg-danger for a danger toast. Here is an example syntax for the version you use:

<div
  class="toast bg-danger mx-auto"
  id="basic-danger-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
>
  <div class="toast-header text-white bg-danger">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button
      type="button"
      class="btn-close btn-close-white"
      aria-label="Close"
      (click)="close()"
    ></button>
  </div>
  <div class="toast-body text-white">Danger Basic Example</div>
</div>

We will check the problem with access to the GitLab server. Someone from our team should contact you soon.


branko.milosavljevic pro premium priority commented 2 years ago

I can report the same behavior with mdb-angular-ui-kit-3.0.1.tgz and mdb-angular-ui-kit-4.0.0.tgz. Toasts are always white.


Arkadiusz Idzikowski staff commented 2 years ago

Did you update the syntax in your application? The code I used in the answer is for versions older than 3.0.0. In 3.0.1 or 4.0.0 you should use toast-primary instead of bg-primary. You can find the updated code in our documentation.


branko.milosavljevic pro premium priority commented 2 years ago

Yes, I use proper syntax. But it seams that problem appears when I add a new theme. I added a new theme with primary and secondary colors as it stated in documentation. While debugging I can see that styles from toasts.scss are overridden by toasts-theme.scss where background color is white.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: PC
  • Browser: Chrome, Safari
  • OS: ios
  • Provided sample code: No
  • Provided link: Yes
Tags