Dropdown stops working, won't expand, after edit

Wappler General Bugs
#1

Wappler Version : 6.03
Operating System : Windows 11
Server Model: None
Database Type: None
Hosting Type: CDN
Component: Dropdown BS5

Expected behavior

Dropdown should expand to show list of values, when clicked

Actual behavior

Dropdown expands at first, but when edit is made to the code of the dropdown or even if any value in the list is changed, it stops expanding. It can still be seen on the page. but clicking it does not do anything
This happens on every page of the project , and even if a new dropdown is added , it behaves in the same way. However , there is no problem on new pages added to the project

Page header code :

<script src="../dmxAppConnect/dmxAppConnect.js"></script>

<meta charset="UTF-8">

<title>{{jsonDS.data.SignUp[session.data.preferredLanguage]}} | </title>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Expires" content="0">

<script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>

<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css" />

<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

<link rel="stylesheet" href="../bootstrap/5/css/bootstrap.min.css" />

<link rel="stylesheet" href="../css/style.css" />

<script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>

<link rel="icon" href="../assets/images/logotitle.svg" type="image/svg+xml">

<script src="../dmxAppConnect/dmxBootbox5/bootstrap-modbox.min.js" defer=""></script>

<script src="../dmxAppConnect/dmxBootbox5/dmxBootbox5.js" defer=""></script>

<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>

Dropdown Code :

    <button id="dropdownLanguage" class="btn dropdown-toggle btn-lg text-center lightBorder btn-outline-info mt-1 mb-1" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" dmx-text="(jsonLanguages.data.Languages.where('LangCode',session.data.preferredLanguage,'==')[0].Lang)+'  🌐'">
      🌐
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown1">
      <a class="dropdown-item" dmx-on:click="session.set('preferredLanguage','en')">English</a>

      <a class="dropdown-item" dmx-on:click="session.set('preferredLanguage','de')">Deutsch</a>

      <a class="dropdown-item" dmx-on:click="session.set('preferredLanguage','ja')">日本語</a>

      <a class="dropdown-item" dmx-on:click="session.set('preferredLanguage','ko')">한국어</a>

      <a class="dropdown-item" dmx-on:click="session.set('preferredLanguage','es')">Español</a>

      <a class="dropdown-item" dmx-on:click="session.set('preferredLanguage','hi')">हिन्दी</a>
    </div>
  </div>
#2

Hi @ruast, I see no problem with the dropdown, therefore the problem should be elsewhere on your page.

Perhaps, comparing the code of the malfunctioning page with the good ones, may help you.

1 Like
#3

Your button has the ID: dropdownLanguage and seems the dropdown is controlled by dropdown1

You can edit that on the menu or you can just change that line (<div class="dropdown-menu" aria-labelledby="dropdownLanguage">)

1 Like
#5

Thanks I’m trying to do that. It was working fine for months then i was busy with other things and when i came back to Wappler and updated the software , the dropdown is not working anymore if i edit anything in it. It still works if i don’t edit anything.

Removing this line seems to solve the problem

<script src="../bootstrap/5/js/bootstrap.min.js"></script>

But can i safely remove this line, won’t it cause problems elsewhere ?

#6

boostrap.js is used for most of the Bootstrap components. In other words, unless you only use Bootstrap for styling, you will need the JavaScript file.

If bootstrap.min.js is causing the problem, then make sure that you have the correct version. The easiest way to do this is to remove the Bootstrap framework from your project and remove the bootstrap.min.js file. Then re-add the Bootstrap framework back into your project. This will install the correct version of Boostrap.

2 Likes
#7

Thank you Ben. I tried to reinstall bootstrap but couldn’t do it correctly so I made a new project and copied my pages and assets over. Now it’s working as expected.

Also after copying the pages , this line went missing in some pages
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
And so the dropdown was not working on some of the pages
Adding it back fixed it