Core .placeholder class conflicts with new Bootstrap .placeholder class

Created on 16 September 2021, almost 3 years ago
Updated 28 February 2024, 6 months ago

Problem/Motivation

Core adds <em class="placeholder">Value</em> to any format markup prefixed with % core/lib/Drupal/Component/Render/FormattableMarkup.php, line 194.

For example to t() functions to values with %var placeholder.


Node Node 1 has been updated.

.placeholder is included on Bootstrap 5.1.0 see Placeholders

So message appears so:

Steps to reproduce

Install Boostrap 5.1.0+, review generate an alert with a var included, like updating a node.

Proposed resolution

Change Drupal .placeholder class to .format-placeholder or similar

Remaining tasks

User interface changes

Class placeholder is not currently used on core and as a generic class name like grid or column is not to surprise the conflict.
Being Bootstrap #1 framework is a matter of time other frameworks will start using placeholder class for content not yet rendered

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Theme 

Last updated 1 day ago

Created by

🇵🇪Peru hatuhay Lima

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇯🇴Jordan Rajab Natshah Jordan

    Not sure how this issue could be fixed in a better way.
    Not to keep having conflicted with the generice .placeholder class.
    The CKEditor 5 is using #placeholder and .placeholder

    • ./misc/drupal.js: return `${Drupal.checkPlain(str)}`;
    • ./lib/Drupal/Component/Render/FormattableMarkup.php: * text output here.
    • ./lib/Drupal/Component/Render/FormattableMarkup.php: $args[$key] = '' . static::placeholderEscape($value) . '';
    • ./lib/Drupal/Core/Template/TwigExtension.php: return $return ? '' . $return . '' : NULL;

    keeping the following for now

    em.placeholder {
      cursor: unset !important;
      vertical-align: unset !important;
      opacity: unset !important;
      background-color: unset !important;
    }
    

    Facing the issue with Bootstrap 5.3.3 too

    .placeholder {
      display: inline-block;
      min-height: 1em;
      vertical-align: middle;
      cursor: wait;
      background-color: currentcolor;
      opacity: 0.5;
    }
    .placeholder.btn::before {
      display: inline-block;
      content: "";
    }
    
    .placeholder-xs {
      min-height: 0.6em;
    }
    
    .placeholder-sm {
      min-height: 0.8em;
    }
    
    .placeholder-lg {
      min-height: 1.2em;
    }
    
    .placeholder-glow .placeholder {
      animation: placeholder-glow 2s ease-in-out infinite;
    }
    
    @keyframes placeholder-glow {
      50% {
        opacity: 0.2;
      }
    }
    .placeholder-wave {
      -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
      mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
      -webkit-mask-size: 200% 100%;
      mask-size: 200% 100%;
      animation: placeholder-wave 2s linear infinite;
    }
    
  • 🇺🇸United States NicholasS

    Have you tried #31 https://www.drupal.org/project/bootstrap_barrio/issues/3228330#comment-1... 💬 Bootstrap conflicts with Drupal core "placeholder" class Fixed ? I have been running that for long while with no issues.

    There is usually always a way to target something even if they share identical CSS classes.

    Drupal's .placeholder
    [data-drupal-messages] .placeholder

    Bootstraps .placeholder
    .placeholder

    There is probably a similar way to target the CKeditors place holder, likely a parent element or other attribute, if you share the details for CKeditors conflict I could help create one.

Production build 0.71.5 2024