Contrib.social

Class error in toast template

Open on Drupal.org →
Created on 20 March 2023, about 2 years ago
Updated 25 March 2023, about 2 years ago

Problem/Motivation

In the toast message template, I see 2 classes that don't exist in the bootstrap doc : mr (mr-2 and mr-auto)

Image toast issue

should be :

Image ok

The svg is pasted to the text and the close button is not to the right of the message as in the documentation (https://getbootstrap.com/docs/5.2/components/toasts/)

Steps to reproduce

Select toast message in config template and display a message

Proposed resolution

They should be replaced by me-2 and me-auto.

<div {{ attributes|without('role', 'aria-label').addClass(classes).setAttribute('role', role[type]).setAttribute('data-bs-autohide', autohide[type]) }} aria-live="assertive" aria-atomic="true" data-delay="10000">
        <div class="toast-header">
          <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" focusable="false" role="img">
            <rect {{ attributes.setAttribute('fill', color[type]) }} width="100%" height="100%"></rect>
          </svg>
          <strong class="me-auto">{{ status_headings[type] }}</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          {{ message }}
        </div>
      </div>

Remaining tasks

Create a commit

✨ Feature request
Status

Fixed

Version

5.5

Component

Code

Created by

🇫🇷France sébastien-fr Nantes - France

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024