MDB5 Angular: Dropdown width doesn&#039;t fit parent wi

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

Jean Marc Celesti free 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 free commented 3 years ago

I added a snippet with the code Thanks you

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

1 0 Best answer

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

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 20 characters.

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 free commented 3 years ago

Thank you so much, it's working well

Add comment

Write

Create snippet

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

Jean Marc Celesti

5Support score
1Questions 0Answers 2Snippets