Topic: Adding captions to fixed buttons
Ver 7.5.0 is out but I still cannot upgrade because fixed button caption is broken
Please provide a solution
Arkadiusz Idzikowski staff commented 5 years ago
We will provide a solution for that, probably in next version.
itay pro commented 5 years ago
Great When ? ...
Arkadiusz Idzikowski staff commented 5 years ago
The planned date for release is April 29
I send you a demo (Arkadiusz)
In ver 7.4.0, https://imgur.com/a/m9MboWK
In ver 7.4.4: https://imgur.com/a/pSUFEES
Please advise.
Arkadiusz Idzikowski staff commented 5 years ago
Dear mdb2,
As i mentioned before - we had to make some changes to the collapse overflow, because of the problems with animation. We are currently working on the solution that will allow to display content correctly in container with 'overflow: hidden'. If we won't be able to find such a solution, we will need to provide another way to use those kind of captions.
itay pro commented 5 years ago
Since it breaks my code I cannot update to 7.4.4 When will it be ready ?
Arkadiusz Idzikowski staff commented 5 years ago
We can't provide an ETA yet.
itay pro commented 5 years ago
Then I must use 7.4.0 because it breaks my buttons Is there a workaround I can use ?
itay pro commented 5 years ago
If you break something, you need to fix it
Arkadiusz Idzikowski staff commented 5 years ago
The code in current version isn't broken. Your feature worked correctly due to the bug in collapse animation that we had to fix. Now we need to find another solution for the cases similar to yours.
itay pro commented 5 years ago
Here are some examples that should be implemented just by adding a [caption] attribute. It should be easy to implement on your side.
I just ask that it will be ready soon as being without labels renders my menu useless
https://i.ytimg.com/vi/zVm4WKB4t2M/maxresdefault.jpg
https://androidexample365.com/content/images/2017/08/labels.png
After ver 7.4.3, my implementation fails I added:
<div class="FixedMenuTitle">aaa</div>
to each button:
<div class="FixedMenuButton">
<a class="btn-floating red waves-light" (click)="menuClicked('aaa')" mdbWavesEffect>
<i class="fa fa-not-equal"></i>
</a>
<div class="FixedMenuTitle">aaa</div>
</div>
after the upgrade the divs with .FixedMenuTitle captions fail to appear.
Investigation shows that the containing div with .fixed_collapse toggles overflow to hidden even when open, cropping the caption that exists next to it
It was working fine in 7.4.0
Please return previous behavior ASAP
Arkadiusz Idzikowski staff commented 5 years ago
The changes in collapse component were necessary due to problems with animation. Please provide some code on which we will be able to reproduce this problem.
After ver 7.4.3, my implementation fails I added: aaa to each button: aaa
after the upgrade the divs with .FixedMenuTitle captions fail to appear. Investigation shows that the containing div with .fixed_collapse toggles overflow to hidden even when open, cropping the caption that exists next to it It was working fine in 7.4.0 Please return previous behavior ASAP
- the text has no background so it hard to read over a complex background
- the menu is much taller than required and takes too much space
- the text is apart from the button, making it confusing for the user to attach the text to the button
- clicking the text does nothing
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red waves-light"mdbWavesEffect (click)="fixed.toggle($event)"> <i class="fa fa-pencil"></i> </a> <div class="fixed_collapse" [mdbCollapse]="isCollapsed" #fixed="bs-collapse"> <span>Star</span> <a class="btn-floating red waves-light"mdbWavesEffect><iclass="fa fa-star"></i></a> <span>User</span> <a class="btn-floating yellow darken-1 waves-light"mdbWavesEffect><iclass="fa fa-user"></i></a> <span>Envelope</span> <a class="btn-floating green waves-light"mdbWavesEffect><iclass="fa fa-envelope"></i></a> <span>Cart</span> <a class="btn-floating blue waves-light"mdbWavesEffect><iclass="fa fa-shopping-cart"></i></a> </div> </div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear mdb2, There's no possibility to add a caption there. But I can advise you, to try to add there some tooltips. That's quite a nice way to achieve some description after hovering on button. Here you can find a documentation for tooltips: https://mdbootstrap.com/angular/advanced/tooltip/ Best Regards, Damianitay pro commented 6 years ago
Hovering is not supported on mobile. Fixed buttons usually have captions, check out Trello's mobile app Besides, I am getting: StaticInjectorError(Platform: core)[TooltipDirective -> TooltipConfig]: NullInjectorError: No provider for TooltipConfig!Damian Gemza staff commented 6 years ago
Dear mdb2, So I'm adding your feature request to our nice-to-have list, and we'll try to implement it in future. Could you please specify, in which scenario you're getting error with Tooltip? Please show me your app.module.ts file. Best Regards, Damianitay pro commented 6 years ago
This is my code a class="btn-floating green waves-light" [routerLink]="['/']" mdbWavesEffect mdbTooltip="AAA" placement="left" i class="fa fa-money"/i /a I had to remove the triangles to post here The error happens when I add: mdbTooltip="AAA" placement="left"Damian Gemza staff commented 6 years ago
Dear mdb2, Tried to reproduce your case with tooltip without any success. For me, there are no errors. Could you please show me module in which you're using MDB modules? Are you using schemas: [NO_ERRORS_SCHEMA] in this module? Please let me know. Best Regards, Damianitay pro commented 6 years ago
Given selected omissions, this my my app.module.ts import { CommonModule } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule, NO_ERRORS_SCHEMA, ErrorHandler } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { Ng2Webstorage } from 'ngx-webstorage'; import { AppRoutingModule } from './app-routing.module'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { ToastModule, NavbarModule, InputsModule, WavesModule, ModalModule, SidenavModule, AccordionModule } from 'ng-uikit-pro-standard'; import { SelectModule } from 'ng-uikit-pro-standard'; import { SharedModule as SharedModuleApp } from './shared/shared.module'; @NgModule({ imports: [ CommonModule, BrowserModule, BrowserAnimationsModule, AppRoutingModule, Ng2Webstorage, SharedModuleApp, HttpClientModule, FormsModule, ReactiveFormsModule, SidenavModule, NavbarModule, AccordionModule, WavesModule, InputsModule, SelectModule, TableModule, ModalModule.forRoot(), ToastModule.forRoot() ], declarations: [ AppComponent ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true } ], bootstrap: [AppComponent], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { }Damian Gemza staff commented 6 years ago
Dear mdb2, I don't see TooltipModule import in your app.module.ts. Do you have hidden it in some other module? How can you use Tooltips without importing their module?itay pro commented 6 years ago
I added TooltipModule to app.module.ts after TableModule and included to the import, yet the same error continues ERROR Error: StaticInjectorError(AppModule)[TooltipDirective -> TooltipConfig]: StaticInjectorError(Platform: core)[TooltipDirective -> TooltipConfig]: NullInjectorError: No provider for TooltipConfig!Damian Gemza staff commented 6 years ago
Could you please send me your whole app, or at least reproduction example at d.gemza@mdbootstrap.com? It would help me to debug your problem. Best Regards, Damian