Dropdown appendToBody


Topic: Dropdown appendToBody

DMann asked 3 years ago

Expected behavior Clicking the button for a dropdown shows the menu

Actual behavior If container of dropdown is not tall enough to show the menu, the menu doesn't show. Appending the menu to the body (like Autocomplete) would allow the menu to float above the container

Resources (screenshots, code snippets etc.)

<div class="row" >   <--  have to add a height here to have the menu show when the button is clicked, but it messes up my page layout -->
    <div class="container-fluid">
        <div class="row">
            <div mdbDropdown class="dropdown btn-group">
                <button
                    mdbDropdownToggle
                    mdbBtn
                    class="dropdown-toggle waves-light"
                    type="button"
                    placement="top">
                    Add Address Field
                </button>
                <div class="dropdown-menu dropdown-primary">
                    <a class="dropdown-item" href="#"> Country</a>
                    <a class="dropdown-item" href="#">City</a>
                    <a class="dropdown-item" href="#">Street</a>
                    <a class="dropdown-item" href="#">State/Province</a>
                    <a class="dropdown-item" href="#">County</a>
                    <a class="dropdown-item" href="#">Municipality</a>
                    <a class="dropdown-item" href="#">Town</a>
                    <a class="dropdown-item" href="#">District</a>
                    <a class="dropdown-item" href="#">Region</a>
                    <a class="dropdown-item" href="#">Township</a>
                    <a class="dropdown-item" href="#">Village</a>
                    <a class="dropdown-item" href="#">Borough</a>
                    <a class="dropdown-item" href="#">Precinct</a>
                    <a class="dropdown-item" href="#">Ward</a>
                    <a class="dropdown-item" href="#">Postal Code</a>
                    <a class="dropdown-item" href="#">Religious Parish</a>
                    <a class="dropdown-item" href="#">Civil Parish</a>
                    <a class="dropdown-item" href="#">Farm</a>
                    <a class="dropdown-item" href="#">Estate</a>
                    <a class="dropdown-item" href="#">Building</a>
                    <a class="dropdown-item" href="#">GPS</a>
                    <a class="dropdown-item" href="#">Other</a>
                </div>
            </div>
        </div>
    </div>
</div>

Arkadiusz Idzikowski staff commented 3 years ago

We are already aware of this problem and it should be fixed in one of the upcoming releases. The dropdown behavior will be adjusted so it works like in select or autocomplete. However, we can't provide an ETA for the fix yet.


DMann commented 3 years ago

OK, thanks.

Dave


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: Laptop
  • Browser: Chromium (Electron)
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No