Problem/Motivation

Toast template uses data attribute data-delay however it has no effect since in bootstrap5 the correct attribute is data-bs-delay so the toast is open for 5 seconds instead of 10 seconds as in the template. See the docs here https://getbootstrap.com/docs/5.3/components/toasts/#options

Also I think it would be nice to have the delay configurable in the theme options?

Steps to reproduce

  1. Go to theme settings /admin/appearance/settings/bootstrap_barrio
  2. Select the Components tab
  3. Expand Messages accordion
  4. Select Toasts from Messages widget dropdown
  5. Save the settings
  6. Go to /user/login page and enter invalid credentials
  7. Page displays the error in a toast
  8. Toast is open for 5 seconds instead of 10 seconds

Proposed resolution

Fix the data-delay attribute in the template

Optional: Add a theme setting that controls how long the toast is opened and fix the template to use the setting

CommentFileSizeAuthor
#7 styles.png66.67 KBbcizej
#6 styles-breaking.png213.24 KBravi kant
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

bcizej created an issue. See original summary.

ravi kant’s picture

@bcizej

The theme is not providing option to set delay option but you can do in your custom theme.

  1. Set "Load library" option as "Local" from your custom theme.
  2. Create a JS file and add below JS code.
  3. /**
     * @file
     * Displays any toast messages present on the page.
     */
    (function (Drupal) {
      'use strict';
    
      Drupal.behaviors.bootstrap_barrio_toast = {
        attach: function () {
          var elements = [].slice.call(document.querySelectorAll('.toast'))
          var toasts = elements.map(function(toastEl) {
            return new bootstrap.Toast(toastEl, {delay: 10000});
          });
          toasts.forEach(toast => toast.show());
        }
      };
    })(Drupal);
    
    
  4. Now attach this JS file in global-styling library
  5. Clear cache , refresh page and check as regeneration steps
ravi kant’s picture

Status: Active » Needs review

bcizej’s picture

@ravi kant

Yes, I managed to add settings field and overrided the toasts template to load the proper attribute from config in a custom sub theme.

I added a PR that fixes the template and adds a new setting field. I don't know if this will be merged but it might be helpful for others on how to modify their sub theme if needed.

ravi kant’s picture

StatusFileSize
new213.24 KB

@bcizej
I checked the branch and found that the option is available now but has no default value. Also, the style is breaking.

bcizej’s picture

StatusFileSize
new66.67 KB

@ravi kant

There is an update hook that sets the default value via drush updb. I don't see any style breaking on my side.

  • hatuhay committed b8d86c43 on 5.5.x
    Issue #3452394 by bcizej: Toast delay attribute has no effect
    
hatuhay’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.