0
Under review

dropdown menus doesn't work on Bootstrap 5

Howcanoe Wang 4 months ago updated by Steven Bethard 1 month ago 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

Under review

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...