Topic: dropdown-menu right aligned in navbar
Hi, I can't get right-aligned dropdown menu to work properly in navbar:
The code I use is
<template>
<div id="default-layout">
<header>
<mdb-navbar expand-lg dark class="double-nav fixed-top scrolling-navbar">
<mdb-navbar-toggler>
<mdb-navbar-nav>
<mdb-dropdown end style="margin-left:100px;">
<mdb-dropdown-toggle tag="a" navLink 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>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
...
However, outside navbar right-aligned dropdown menu is fine:
<template>
<div id="default-layout">
<header>
<mdb-dropdown end style="margin-left:100px;">
<mdb-dropdown-toggle tag="a" navLink 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>
...
How should I fix this issue? What is the proper way to have a right-aligned dropdown menu in navbar?
Thank you
Use this code:
<mdb-dropdown tag="li" class="nav-item" end>
<mdb-dropdown-toggle
slot="toggle"
tag="a"
navLink
color="primary"
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>
with an additional styling:
.navbar .dropdown-menu {
position: relative!important;
}
Some of this component's got overwritten by navbar styling. I will create a task to sort out this issue. Kind regards, Magdalena
I don't know why my images are not displayed by here are the links:
1) Ugly: https://drive.google.com/open?id=1hxnY-MZBNSyOyCcxXWoVAhBnwj8hyPIH
2) Proper: https://drive.google.com/open?id=1yMYfzqhonbnjCVvrkGD3cQP8Fu-NZFZ-
There's yet another issue: whenever I click the dropdown menu trigger I get an error record in console log:
[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <li>.
found in
---> <MdbDropdown>
<MdbNavbarNav>
<MdbNavbarToggler>
<MdbNavbar>
<DefaultLayout> at src/layouts/DefaultLayout.vue
<App> at src/App.vue
<Root>
And the same when I click a dropdown menu item. I do not use a "native" modifier here. I am not sure if this issue is related to original question
Thanks, Magdalena This really fixes original issue. Could you please also give a hint on the message I get in browser console when using vue dropdowns? Best regards, Vladislav
About .native modifiers - the last MDB Vue version was built on Vue 2.6.10 - this console error is shown when it's used with 2.6.11. We are currently working on updating our components - the next release should sort out those issues (as well as dropdown styling). Kind regards, Magdalena
Thanks for your reply! I already found similar questions and this exactly answer in this chat. Will wait until next release. So far I suppress the warning message with
Vue.config.silent = true;
Best regards, Vladislav
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.2.0
- Device: MacBook
- Browser: Chrome,Safari
- OS: OSX
- Provided sample code: No
- Provided link: No