Dropdown not working properly

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.

Arsenii pro commented 6 years ago

Here is an image showing the result: https://ibb.co/feLEAo

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear Arsenii, Please check this code. It should work fine in your case:

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

Best Regards, Damian

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, Arsenii

Damian 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, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Arsenii

Pro User 69Support score
16Questions 5Answers 0Snippets