Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Dropdown in Nav behaviour difference between MDB Angular and Bootstrap

ZaibuA priority asked 2 years ago


Expected behavior Dropdon menu in collapse nav bar should expand the nav area when menu is shown instead of displaying as an overlay

Actual behavior Basically it seems that the dropdown always displays an overlay for the menu items even when the nav bar is collapsed.

I need the dropdown to behave the same as the bootstrap example. i.e. when the nav bar is collapsed the dropdown menu displays within the nav bar when expanded and not over it:

E.g. mdbootstrap angular dropdown in nav: mdbootstrap Angular dropdown in nav

Bootstrap example with dropdown in nav bar: Bootstrap example with dropdown in nav bar

This is the mark-up used for the mdbootstrap dropdown: Navbar

<!-- Toggle button -->
<button
  class="navbar-toggler"
  type="button"
  (click)="navbarNavDarkDropdown.toggle()"
  data-bs-toggle="collapse"
  data-bs-target="#navbarNavDarkDropdown"
  aria-controls="navbarNavDarkDropdown"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <i class="material-icons" data-icon="menu"></i>
</button>

<!-- Collapsible wrapper -->
<div
  class="collapse navbar-collapse"
  id="navbarNavDarkDropdown"
  mdbCollapse
  #navbarNavDarkDropdown="mdbCollapse"
>
  <!-- Left links -->
  <ul class="navbar-nav">
    <li mdbDropdown class="nav-item dropdown" id="navbarDropdownMenuLink">
      <a
        class="nav-link dropdown-toggle"
        href="javascript:void(0)"
        id="navbarDarkDropdownMenuLink"
        role="button"
        mdbDropdownToggle
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown link
      </a>
      <ul
        mdbDropdownMenu
        class="dropdown-menu dropdown-menu-dark"
        aria-labelledby="navbarDarkDropdownMenuLink"
      >
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- Collapsible wrapper -->

How do I get the same behaviour from the MDBootstrap angular components as for the pure bootstrap components.

Resources (screenshots, code snippets etc.)


Arkadiusz Idzikowski staff answered 2 years ago


I'm afraid that the implementation of such a feature is not possible in our dropdown component. We deliberately render the dropdown menu at the end of the document body to avoid problems when the menu is displayed under other elements.



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.0.0
  • Device: Mobile
  • Browser: Chrome
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No