Topic: MDB 8 - mdbBtn
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
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;
}
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Damian Gemza staff commented 6 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.