MDB5 Angular: Dropdown width doesn't fit parent width


Topic: MDB5 Angular: Dropdown width doesn't fit parent width

Jean Marc Celesti asked 3 years ago

Hello Everyone,I have an issue.I have a responsive element as mdbDropdownToggle. When I open the dropdown by clicking on it, my menu width doesn't match with the parent. When I was in MDB4 , without the dropdown menu overlay , it worked. Now as the dropdown is an overlay, it fits only with the dynamic content nor with the parent.Thx If somebody can help me


Arkadiusz Idzikowski staff commented 3 years ago

@Jean Marc Celesti Could you please edit your post and add a simple HTML/TS code so we can reproduce this problem on our end?


Jean Marc Celesti commented 3 years ago

I added a snippet with the code Thanks you


Arkadiusz Idzikowski staff answered 3 years ago

You can dynamically update dropdown menu width by using the Angular template variable and [style] input. Here is an example:

<ng-container>
  <div class="d-flex flex-wrap justify-content-between header-bar align-items-center w-100">
    <div class="col-2 test button"></div>
    <div class="col-5 padding-tb-2 h-100" mdbDropdown style="cursor: text">
      <div
        #toggle
        class="search-bar h-100 d-flex flex-row align-items-center padding-2 dropdown-toggle"
        mdbDropdownToggle
      >
        <div class="search-bar h-100 d-flex flex-row align-items-center w-100" style="cursor: text">
          <div class="caption waves-light">placeholder</div>
          <div class="padding-1"></div>
        </div>
      </div>
      <div
        mdbDropdownMenu
        class="dropdown-menu dropdown-primary dropdown-custom"
        (click)="$event.stopPropagation()"
        [style.width.px]="toggle.offsetWidth"
      >
        <div class="h-100 d-flex flex-column w-100" style="background-color: transparent">
          <div class="search-bar d-flex flex-row align-items-center padding-2">
            <input id="inputSearch" class="caption" placeholder="placeholder" matInput />
            <div class="padding-1">
              <span class="button">close</span>
            </div>
          </div>
          <div class="divider"></div>
          <div class="result-container padding-2">Hello</div>
        </div>
      </div>
    </div>
    <div class="col-5 d-flex flex-row justify-content-end"></div>
  </div>
</ng-container>

Jean Marc Celesti commented 3 years ago

Thank you so much, it's working well


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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags