MDB 8 - mdbBtn


Topic: MDB 8 - mdbBtn

mdb2 pro asked 2 months ago

Q: floating mdbBtn

a. position: absolute; right: 60px; top: 10px; is missing.

b. overflow should be visible not hidden

c. the buttons jump up when entering view and disappear immediately, until clicked on. It should only appear on click

A: Floating or fixed? Fixed button never has such styles. User have to add such styles on his own. There were only position: fixed within .fixed-action-btn class. User has to add the positioning on his own.

--

You call it fixed buttons: https://mdbootstrap.com/docs/angular/components/buttons/#fixed-buttons

And yes, MY style that worked on 7 wasn't there on 8

However, styling it is done as on .btn-floating:

.btn-floating {
  vertical-align: middle;
  overflow: visible !important;

  p {
    position: absolute;
    right: 60px;
    top: 10px;
    background: #000;
    color: #fff;
    border-radius: .25rem;
    padding: .25rem .5rem;
    white-space: nowrap;
  }
}

Without overflow: visible !important; the button was missing

Still: the buttons jump up when entering view and disappear immediately, until clicked on. It should only appear on click


Damian Gemza staff commented 2 months ago

Could you please provide me with the code of this button? I see, that you're using there a <p> tags. Without the code, I can't help you.


mdb2 pro answered 2 months ago

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>

Damian Gemza staff answered 2 months ago

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


mdb2 pro answered 2 months ago

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/


Damian Gemza staff commented 2 months ago

So i'm closing this ticket.


mdb2 pro answered 2 months ago

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


Arkadiusz Idzikowski staff commented 2 months ago

We will take a closer look at that.


Damian Gemza staff answered 2 months ago

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


mdb2 pro answered 2 months ago

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

Arkadiusz Idzikowski staff commented 2 months ago

We will take a closer look at this problem again, but I'm afraid that we need to keep some of these styles by default.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags