0
À l'étude

dropdown menus doesn't work on Bootstrap 5

Howcanoe Wang il y a 2 ans mis à jour par Steven Bethard il y a 2 ans 5

I am using a bootstrap 5 theme. And by default, click the dropdown button will jump back to page top.

It is due to the dropdown grammar updates from bootstrap 4 to bootstrap 5:

In Bootstrap 4, it is 

data-toggle="dropdown"

while in Bootstrap 5, it is

data-bs-toggle="dropdown"

Please consider giving an option to specify the bootstrap version to fix this bug, e.g.

<script src="https://bibbase.org/...&bsv=5"></script>

I can fix this by changing scripts in the Browser F12 console, but unable to save the changes because it is dynamic rendered by javascript

À l'étude

Hi Howcanoe,

Thanks for reporting this and for the suggestion. Do you have a page where I can see this problem in action?


Christian

Dear Christian, please check the following link: https://lab.fieldphenomics.com/#publications

This problem can be somewhat fixed if you modify in the F12 console like this:

But it seems only enables the appearance of the dropdown menu, the following <a> tag in <ul> should also need an update by adding 

class="dropdown-item"

But it will still jump to the page top even updates with previous suggestions because href="#", maybe either add a jump id (e.g. herf="#bibbase" or parent container id)

or giving a keyword for the user to specify their own location, for me is the #publications works perfectly

<script src="https://bibbase.org/...&refersh_anchor=publications"></script>
<script type="javascript" src="dist/js/bootstrap.js"></script>
<link href="dist/css/bootstrap.css" rel="stylesheet">
You can try this code.

Any download link for the "dist/js/bootstrap.js" and "dist/css/bootstrap.css"? it seems link to local files

+2

Thanks to Howcanoe Wang's nice debugging, I was able to write a script that I place right after the bibbase script to fix things up for Bootstrap 5:

bibbaseHeaderElem = document.getElementById("bibbase_header");
for (dropdownToggleElem of bibbaseHeaderElem.getElementsByClassName("dropdown-toggle")) {
    dropdownToggleElem.setAttribute("data-bs-toggle", "dropdown")
}
for (menuElem of bibbaseHeaderElem.getElementsByClassName("dropdown-menu")) {
    for (aElem of menuElem.getElementsByTagName("a")) {
        aElem.classList.add("dropdown-item");
    }
}

Hopefully bibbase will upgrade to Bootstrap 5, but until then...