MDB 8 - mdbBtn

Here is the code

<div class="fixed-action-btn">

  <a mdbBtn #button color="red" floating="true" class="waves-light" mdbWavesEffect (click)="fixed.toggle($event)">
    <i class="fa fa-plus"></i>
  </a>

  <div class="fixed_collapse" mdbCollapse #fixed="bs-collapse" (click)="fixed.toggle($event)">

    <ng-container *ngIf="bShow1">
      <div>
        <a mdbBtn floating="true" color="yellow" mdbFixedCaption="Caption" [collapseButton]="button" class="waves-light" [routerLink]="['',{}]" mdbWavesEffect>
          <i class="fa fa-pencil-alt"></i>
        </a>
      </div>
    </ng-container>

    <ng-container *ngIf="bShow2">
      <div>
        <a mdbBtn floating="true" color="green" mdbFixedCaption="Caption" [collapseButton]="button" class="waves-light" (click)="click()" mdbWavesEffect>
          <i class="far fa-money-bill-alt"></i>
        </a>
      </div>
    </ng-container>

    <ng-container *ngIf="bShow1">
      <div>
        <a mdbBtn floating="true" color="blue" mdbFixedCaption="Caption" [collapseButton]="button" class="waves-light" (click)="click()" mdbWavesEffect>
          <i class="fa fa-file"></i>
        </a>
      </div>
    </ng-container>

    <ng-container *ngIf="bShow4">
      <div>
        <a mdbBtn floating="true" color="blue" mdbFixedCaption="Caption" [collapseButton]="button" class="waves-light" (click)="click()" mdbWavesEffect>
          <i class="fa fa-camera"></i>
        </a>
      </div>
    </ng-container>

  </div>
</div>

Dear @mdb2

1) You're missing the bottom: 45px; right: 24px styles on .fixed-action-btn class. Those styles are used in our documentation example: Buttons.

2) How can I observe problem with overflow? Does fixed button items are hidden by some other page elements?

3) I don't see any jumping behavior on Firefox and Chrome.

Best Regards,

Damian

I do have:

.fixed-action-btn {
  bottom: 45px !important;
  right: 270px !important;
}

but I had to add !important lately.

Jumping is resolved using https://mdbootstrap.com/support/angular/mdb-8-mdbbtn-throws-elementnative_add_listener/

I conclude this question with a remark that

right: auto;
bottom: auto;

should not be in your .fixed-action-btn because it prevents manual positioning of the menu and forces the use of !important that was not needed before

Dear @mdb2

We'll remove the right: auto and bottom: auto styles after two weeks.

Until now, you have two workarounds for your situation:

1) Define the positioning styles for .fixed-action-btn in the component.scss file without any !important flag,

2) Define the positioning styles for div.fixed-action-btn in the global styles.scss file without any !important flag.

Feel free to choose the best approach for your needs.

Best Regards,

Damian

In ver 8.1.1

right: auto;
bottom: auto;

got replaced with:

right: 35px;
bottom: 35px;

so !important is still required

.fixed-action-btn {
  bottom: 45px !important;
  right: 270px !important;
}