Dropdown and radiobuttons not working

Topic: Dropdown and radiobuttons not working

Kramer free asked 3 years ago

I have been testing with radiobuttons and dropdown menus in release 5.2.0. Those test has been successful.

Actual behavior After upgrading to béte version 5.3.0 the radiobuttons and dropdown menus did not work anymore. Most likely (in my opinion), there is a fault is de "head" section with the link libraries. The question now is: Can you provide me with an example for the minimal setup for the "head" section to get it working again. I have been struggling for days now and really need some help. Thanks in advance, Bert

Marcin Luczak staff commented 3 years ago

Hi,

Could you please specify which product (MDB4 or MDB5) you describe because none of our products has a version starting with 5.x.x?

Please also provide a snippet with your code causing problems, since we are not changing our index.html files and head section very often it may be a problem with the wrong syntax of your components or a problem with the imported files instead of bad import links.

Regards, Marcin

Kramer free commented 3 years ago

Hello Marcin, I'm a new user of MDBootstrap and therefore a fresh start (and may be some missing file(s). I started with MDBbootstrat 4.6.0. The attached snipped with out-of-the-box solution worked in release 4.6.0. Shortly after that, I decided to go for MDB 5.0 Béta 1. The Radionbuttuns are working ok, but the dropdown failed. However I did not notice that for a while. Shortly after installing 5.0 Béta , I decided to install MDBoostrap 5.0 Béta 2. I also decided to go for the Pro-version. Thereafter, both dropdown and Radiobuttons did not work. I'm now back on the distribution pakkage of 5.0 Béta 1, with the dropdown version not working and without the Pro-version upgrade. In order to eliminate the problem I have a couple of options: 1) There is a missing reference in the section 2) There is something missing in the libraries or 3)And most likely I made a fault with upgrading the packages. So, now trying to get it going without the various upgrades. Hope you can help me finding the right direction to look at. Bert

<p>Hello Marcin,
I'm a new user of MDBootstrap and therefore a fresh start (and may be some missing file(s). I started with MDBbootstrat 4.6.0. The attached snipped with out-of-the-box solution worked in release 4.6.0. Shortly after that, I decided to go for MDB 5.0 Béta 1.
The Radionbuttuns are working ok, but the dropdown failed. However I did not notice that for a while. Shortly after installing 5.0 Béta , I decided to install MDBoostrap 5.0 Béta 2. I also decided to go for the Pro-version. Thereafter, both dropdown and Radiobuttons did not work.
I'm now back on the distribution pakkage of 5.0 Béta 1, with the dropdown version not working and without the Pro-version upgrade. In order to eliminate the problem I have a couple of options: 1) There is a missing reference in the section 2) There is something missing in the libraries or 3)And most likely I made a fault with upgrading the packages.  So, now trying to get it going without the various upgrades.
Hope you can help me finding the right direction to look at.
Bert</p>

Please insert min. 15 characters.

Add comment

Kramer free answered 3 years ago

0 0 Best answer

<p>

Material Design for Bootstrap

Brand</p>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    
    <li class="nav-item dropdown">
      <a
        class="nav-link dropdown-toggle"
        href="#"
        id="navbarDropdown"
        role="button"
        data-mdb-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown
      </a>
      
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider" /></li>
        <li>
          <a class="dropdown-item" href="#">Something else here</a>
        </li>
      </ul>
      </ul>

</div>

</code></pre>

<p>

3 (disabled)

<script type="text/javascript" src="js/mdb.min.js"></script>

<script type="text/javascript"></script>
</code></pre>

Please insert min. 20 characters.

Material Design for Bootstrap Brand

<!-- Toggle button -->
<button
  class="navbar-toggler"
  type="button"
  data-mdb-toggle="collapse"
  data-mdb-target="#navbarSupportedContent"
  aria-controls="navbarSupportedContent"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <i class="fas fa-bars"></i>
</button>

<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <!-- Left links -->
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <!-- Navbar dropdown -->
    <li class="nav-item dropdown">
      <a
        class="nav-link dropdown-toggle"
        href="#"
        id="navbarDropdown"
        role="button"
        data-mdb-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown
      </a>
      <!-- Dropdown menu -->
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider" /></li>
        <li>
          <a class="dropdown-item" href="#">Something else here</a>
        </li>
      </ul>
      </ul>
  <!-- Left links -->

  <!-- Search form -->
  </div>
<!-- Collapsible wrapper -->

2 3 (disabled)

<!-- End your project here-->

<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>

Marcin Luczak staff commented 3 years ago

I've run your code on a clean version of MDB5 3.2.0 package and it works just fine. You have proper imports in your scripts section, and you should have the following imports attached in your head tag:

<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />  <link rel="stylesheet" href="css/mdb.min.css" />

I would suggest you download the clean version of your MDB5 Pro package once again and use your code for dropdown without interference with the imports sections. If this won't fix your problem please send me your zipped package to m.luczak@mdbootstrap.com. I'll try to find what is wrong with your setup.

Regards, Marcin

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: Request sample head section
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Kramer

20Support score
1Questions 1Answers 0Snippets