1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB 8 - mdbBtn

itay pro asked 4 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 4 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.

itay pro answered 4 years 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 4 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.

Damian Gemza staff answered 4 years 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

itay pro answered 4 years 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 4 years ago

We will take a closer look at that.

itay pro answered 4 years 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 4 years ago

So i'm closing this ticket.

Damian Gemza staff answered 4 years 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

itay pro answered 4 years 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>
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: 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
Tags
mdbbtn
About author
itay
Pro User 2474Support score
150Questions 196Answers 0Snippets