Contrib.social

Bootstrap component code not working as expected in custom block

Open on Drupal.org →
Created on 5 May 2023, over 1 year ago
Updated 5 June 2023, over 1 year ago

I am using this Bootstrap 5 code in a custom block. The button renders correctly but the dropdown function does not work. I am so new to Drupal 9/10 I don't know much about it yet so I am posting here hoping for some feedback please.

I pasted the code using both the Full HTML text area and the Source tool. 

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

I also tried adding a link to the CDN in case that was the reason but after saving it that code is getting encoded weirdly. This:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</script>

Turns into this:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"><script>
	&amp;lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" &amp;gt;</script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

I would like to understand this too

Thanks for your time and thoughts.

💬 Support request
Status

Closed: won't fix

Version

3.0

Component

Code

Created by

🇺🇸United States guymandude

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

Comments & Activities

  • Issue created by @guymandude
  • Comment over 1 year ago →
    🇺🇸United States bcobin

    I'm also having issues with dropdown menus in a subtheme, but I'm working with Domain, which currently has issues of its own, so I'm not entirely sure where the problem lies. Commenting here so I can follow the issue - thanks!

  • Comment over 1 year ago →
    🇺🇸United States guymandude

    I have narrowed my problem down to the default Full HTML Text Format. I created a new Text Format and unchecked all filters and my code rendered fine. I believe the 'Correct faulty and chopped off HTML' setting was probably what was affecting it although I haven't taken the time to do a thorough investigation.

  • Status changed to Closed: won't fix over 1 year ago
  • Comment over 1 year ago →
    🇦🇺Australia jannakha Brisbane!

    Hi all,
    this is CKEditor issue - it wraps all in

    tag which breaks bootstrap layout and JS (see attached screenshots).

    For example, if you'd put this bootstrap snippet directly into a *.twig file - it'll work without issues.
    - see https://github.com/ckeditor/ckeditor5/issues/1537

    CKEditor is a content editor not an HTML editor.

    It's possible to create CKEditor plug-in to enable specific JS-enabled functionality (see https://www.drupal.org/project/ckeditor_accordion → ).

    When reporting issues:
    - provide browser/OS details
    - check browser's console log to see where the error is coming from (that'll help you see where the issue is)

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024