Topic: dropdown icon click in menu
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
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
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 commented 4 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 premium commented 4 years ago
Thank you, I will add this to our bug list. Best regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Magdalena Dembna staff premium commented 4 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