dropdown-menu right aligned in navbar

Topic: dropdown-menu right aligned in navbar

grekeh pro asked 4 years ago

Hi, I can't get right-aligned dropdown menu to work properly in navbar:

Ugly dropdown

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>
...

Fine dropdown menu

How should I fix this issue? What is the proper way to have a right-aligned dropdown menu in navbar?

Thank you

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

grekeh pro answered 4 years ago

0 0 Best answer

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

Add comment

norsk_test free answered 4 years ago

0 0 Best answer

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

Add comment

grekeh pro answered 4 years ago

0 0 Best answer

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

Add comment

grekeh pro answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

grekeh pro answered 4 years ago

0 0 Best answer