MDB 8 - mdbBtn - Material Design for Bootstrap

Topic: MDB 8 - mdbBtn

mdb2 pro asked 5 years 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 5 years 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.

Add comment

mdb2 pro answered 5 years ago

0 0 Best answer

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>

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

mdb2 pro answered 5 years ago

0 0 Best answer

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 5 years ago

So i'm closing this ticket.

Add comment

mdb2 pro answered 5 years ago

0 0 Best answer

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 5 years ago

We will take a closer look at that.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

mdb2 pro answered 5 years ago

0 0 Best answer

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 5 years 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 8.0.0
Device: NA
Browser: NA
OS: NA
Provided sample code: No
Provided link: Yes

itay

Pro User

2474Support score
150Questions 196Answers

0Snippets likes 0Snippets