Topic: dropdown icon click in menu

lyahim free asked 2 years ago


Dear Support!

I found a strange behaviour in the mdb-dropdown-menu. On mobile resolution(both mobile devices and chrome devtool mobile views) if the user click on exactly the icon, the whole menu collapsed. The page doesn't reloaded.I attached my code snippet, because on demo site this behaviour not apperared.

<mdb-navbar color="indigo" dark>
  <mdb-navbar-brand href="#">{{$t('')}}</mdb-navbar-brand>
  <mdb-navbar-toggler>
    <mdb-navbar-nav>
      <mdb-nav-item href="/">{{$t('')}}</mdb-nav-item>
      <!--<mdb-nav-item href="/my_stat">{{$t('')}}</mdb-nav-item>-->
    </mdb-navbar-nav>
    <mdb-navbar-nav right>
      <mdb-dropdown tag="li" class="nav-item" hover>
        <mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>
          <img :src="require('@/assets/flags/'+language+'.png')">
        </mdb-dropdown-toggle>
        <mdb-dropdown-menu right>
          <mdb-dropdown-item @click="changeLanguageTo('en')">
            <img :src="require('@/assets/flags/en.png')">
            {{$t('general.lang_en')}}
          </mdb-dropdown-item>
          <mdb-dropdown-item @click="changeLanguageTo('hu')">
            <img :src="require('@/assets/flags/hu.png')">
            {{$t('general.lang_hu')}}
          </mdb-dropdown-item>
        </mdb-dropdown-menu>
      </mdb-dropdown>
      <mdb-dropdown tag="li" class="nav-item" hover>
        <mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>
          <i class="fas fa-user"></i>
        </mdb-dropdown-toggle>
        <mdb-dropdown-menu right>
          <h6 class="dropdown-header">{{alias}}</h6>
          <mdb-dropdown-item @click="logoutAndRefresh">{{$t('general.logout')}}</mdb-dropdown-item>
        </mdb-dropdown-menu>
      </mdb-dropdown>
    </mdb-navbar-nav>
  </mdb-navbar-toggler>
</mdb-navbar>

Thank you for help.

Mihaly


Magdalena Dembna staff commented 2 years ago

Hi, I couldn't reproduce your issue - could you create a code snippet here: https://mdbootstrap.com/snippets/ to illustrate the problem? Best regards, Magdalena


Magdalena Dembna staff answered 2 years ago


Unfortunately, there is a bug in our package regarding collapsing navbar- I will add it to our task list. I tried to create some kind of workaround to temporarily solve this issue and try if this solution works:

<mdb-dropdown  @click.native.stop> .... </mdb-dropdown>

Let me know if it helps. Best regards, Magdalena


lyahim free commented 2 years ago

Your solution works correctly, thank you. I found an other bug. When the hover attribute is active on dropdown, on mobile mode have to click twice for show the dropdown content.


Magdalena Dembna staff commented 2 years ago

Thank you, I will add this to our bug list. Best regards, Magdalena


lyahim free answered 2 years ago


Hi Magdalena!

I found out the root cause of problem.In tutorials there are a property 'navLink' on mdb-dropdown-toggle component, for example:

<mdb-dropdown tag="li" class="nav-item">
      <mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>Dropdown</mdb-dropdown-toggle>
      <mdb-dropdown-menu>
        <mdb-dropdown-item>Action</mdb-dropdown-item>
        <mdb-dropdown-item>Another action</mdb-dropdown-item>
        <mdb-dropdown-item>Something else here</mdb-dropdown-item>
      </mdb-dropdown-menu>
    </mdb-dropdown>

Dropdown Action Another action Something else here

When mdb-dropdown-toggle content is a text, it works well, but in my case that is an icon/image, for example:

<mdb-dropdown-toggle tag="a" navLink color="indigo" slot="toggle" waves-fixed>
          <i class="fas fa-user"></i>
        </mdb-dropdown-toggle>

When I remove 'navLink' property it works correctly, but the css style missing. Please check the examples above.An other remark, in API spec the 'navLink' not exists.

Thank you,Mihaly



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: Mobiles
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No