Topic: Dropdown not working properly
Arsenii pro asked 6 years ago
<div class="dropdown" dropdown [dropup]="true"> <button *ngIf="condition1" type="button" class="btn btn-deep-purple waves-light w-100" mdbRippleRadius (click)="action()" dropdownToggle>Text<i class="fa fa-chevron-right"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a *ngIf="condition2" class="dropdown-item" (click)="action2()">Text2</a> <a *ngIf="condition3" class="dropdown-item" (click)="action3()">Text3</a> </div> </div>
So I expected to have dropup flag working (btw this was my main reason to migrate from 5.2 to 6.1). Instead dropdown still opens down and moreover white background card is not being resized at all to fit the elements.
Damian Gemza staff answered 6 years ago
<div class="dropup" dropdown style="margin-top: 50vh" [dropup]="true" > <button *ngIf="condition1" type="button" class="btn btn-deep-purple waves-light w-100"mdbRippleRadius (click)="action()"dropdownToggle>Text<iclass="fa fa-chevron-right"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a *ngIf="condition2" class="dropdown-item" (click)="action2()">Text2</a> <a *ngIf="condition3" class="dropdown-item" (click)="action3()">Text3</a> </div> </div>
Arsenii pro commented 6 years ago
Dear Damian, Your example works, except for I removed "style= ... " since I have several buttons directly above dropdown button and can't afford such place reserving. The only problem is that this dropdown doesn't provide material style even with applying "dropdown-primary" class to dropdown menu. Do you know how to resolve the issue? Best Regards, ArseniiDamian Gemza staff commented 6 years ago
Dear Arsenii, Please open assets/scss/pro/_dropdowns.scss file, and in line .dropdown { } add also .dropup class. After this, your problem will be gone. Best Regards, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Arsenii pro commented 6 years ago
Here is an image showing the result: https://ibb.co/feLEAo