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 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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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