Two different dropdown buttons unintentionally opens the sam

Topic: Two different dropdown buttons unintentionally opens the same dropdown.

Macjohn free asked 3 years ago

Expected behavior I added two dropdowns, and would expect to see each respective dropdown, onclick.

Actual behavior Both dropdown buttons opens the same dropdown. I see the first dropdown, no matter which of the buttons I click.

Resources (screenshots, code snippets etc.) This is my html.

First dropdown:

                        <button 
                            class='banner-button-big dropdown-toggle'
                            type='button'
                            data-toggle='dropdown' 
                            aria-haspopup='true' 
                            aria-expanded='false'
                        >
                            <i class='fas fa-cog'></i>
                        </button>
                        <div class='dropdown-menu dropdown-primary'>
                             <a     
                                class='dropdown-item save-check' 
                                href='/persons' 
                                data-target='#is-unsaved'   
                             ><i class='fas fa-users' style='margin-right:10px;'></i>Personer</a>
                             <a     
                                class='dropdown-item save-check' 
                                href='/rates' 
                                data-target='#is-unsaved' 

                             >
                                <i class='fas fa-briefcase' style='margin-right:10px;'></i>
                                Satser
                             </a>
                        </div>

Second dropdown:

                     <button 
                        type='button'
                        data-toggle='dropdown' 
                        aria-haspopup='true' 
                        aria-expanded='false'
                        class='dropdown-toggle'
                    >
                        <i class='fas'>
                            <img
                                src='https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg'
                                class='rounded-circle'
                                height='38'
                                alt=''
                                loading='lazy'
                            />
                        </i>
                    </button>
                    <div class='dropdown-menu dropdown-primary'>
                        <a     
                                class='dropdown-item save-check' 
                                href='/profile' 
                                data-target='#is-unsaved'      
                             ><i class='fas fa-user-cog' style='margin-right:10px;'></i>Min profil</a>
                        <div class='dropdown-divider'></div>
                        <a     
                                class='dropdown-item save-check' 
                                href='/logoff' 
                                data-target='#is-unsaved'      
                             ><i class='fas fa-power-off' style='margin-right:10px;'></i>Log ud</a>
                    </div>

Add comment

Krzysztof Wilk staff answered 3 years ago

1 0 Best answer

<p>As you can see in your documentation - you have to wrap your single dropdown in the <code>div</code> element with the <code>.dropdown</code> class (it should contain trigger + dropdown menu elements). So your single dropdown should look like this:</p>

<pre class="prettyprint"><code><div class="dropdown">
  <button
    type="button"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
    class="dropdown-toggle"
  >
    <i class="fas">
      <img
        src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
        class="rounded-circle"
        height="38"
        alt=""
        loading="lazy"
      />
    </i>
  </button>
  <div class="dropdown-menu dropdown-primary">
    <a
      class="dropdown-item save-check"
      href="/profile"
      data-target="#is-unsaved"
      ><i class="fas fa-user-cog" style="margin-right: 10px"></i>Min
      profil</a
    >
    <div class="dropdown-divider"></div>
    <a
      class="dropdown-item save-check"
      href="/logoff"
      data-target="#is-unsaved"
      ><i class="fas fa-power-off" style="margin-right: 10px"></i>Log ud</a
    >
  </div>
</div>
</code></pre>

<p>Best regards</p>

Please insert min. 20 characters.

Hi!

As you can see in your documentation - you have to wrap your single dropdown in the div element with the .dropdown class (it should contain trigger + dropdown menu elements). So your single dropdown should look like this:

<div class="dropdown">
  <button
    type="button"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
    class="dropdown-toggle"
  >
    <i class="fas">
      <img
        src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
        class="rounded-circle"
        height="38"
        alt=""
        loading="lazy"
      />
    </i>
  </button>
  <div class="dropdown-menu dropdown-primary">
    <a
      class="dropdown-item save-check"
      href="/profile"
      data-target="#is-unsaved"
      ><i class="fas fa-user-cog" style="margin-right: 10px"></i>Min
      profil</a
    >
    <div class="dropdown-divider"></div>
    <a
      class="dropdown-item save-check"
      href="/logoff"
      data-target="#is-unsaved"
      ><i class="fas fa-power-off" style="margin-right: 10px"></i>Log ud</a
    >
  </div>
</div>

Best regards

Add comment

Macjohn free answered 3 years ago

0 0 Best answer

Ah! Of course! Sorry about that. I only had .dropdown on the main container.

Thank you.

Krzysztof Wilk staff commented 3 years ago

Hi!

I'm glad I could help! If you have more questions - feel free to ask :)

Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.0
Device: Laptop
Browser: Any
OS: MacOS
Provided sample code: No
Provided link: No

Macjohn

127Support score
9Questions 8Answers 1Snippets