Adding captions to fixed buttons


Topic: Adding captions to fixed buttons

mdb2 pro asked a year ago

What is the best way to add captions near the icons in the fixed popup menu ? https://mdbootstrap.com/angular/components/buttons/#fixed-buttons

Damian Gemza staff commented a year 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, Damian

mdb2 pro commented a year 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 a year 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, Damian

mdb2 pro commented a year 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 a year 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, Damian

mdb2 pro commented a year 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 a year 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?

mdb2 pro commented a year 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 a year 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

mdb2 pro answered a year ago

It appears that an import was commented. Now it works
import { MDBBootstrapModule } from 'ng-uikit-pro-standard';

mdb2 pro answered 12 months ago

I still need a workaround for adding captions to the fixed menu items What can I do ?

Damian Gemza staff answered 12 months ago

Dear mdb2, As I said you before, the FAB button is designed without any captions, and it shouldn't have a captions. But if you really need that captions - please try the code from below. It's not an ellegant way, but maybe it will fit your needs.
<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>
Best Regards, Damian

mdb2 pro commented 12 months ago

Not elegant yet interesting, I'll give it a try

mdb2 pro answered 8 months ago

Hi Damian, I played with your solution for the last months yet it is problematic  because:
  1. the text has no background so it hard to read over a complex background
  2. the menu is much taller than required and takes too much space
  3. the text is apart from the button, making it confusing for the user to attach the text to the button
  4. clicking the text does nothing
A much better solution would be to place the text next to the button, sharing the same background and making it wider yet more compact Attached are few examples. I suggest adding the text to the background, along side the icon https://i.ytimg.com/vi/zVm4WKB4t2M/maxresdefault.jpg https://i2.wp.com/angularscript.com/wp-content/uploads/2017/08/Material-Design-Float-Button-For-Angular-4.png https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaibCBFq-BmDiKXIocViAVFYVNmU5dUeTcEgAXEZ3ufMy3AN8P https://4.bp.blogspot.com/-xViGypMDFuc/VtGJwsUus-I/AAAAAAAACoc/oD30hDMm_MY/s1600/floating-action-menu-material-design1.jpg https://androidexample365.com/content/images/2017/08/labels.png https://i1.wp.com/reactscript.com/wp-content/uploads/2018/01/Material-Floating-Buttons-For-React-Native.png https://i0.wp.com/www.confusedretriever.com/wp-content/uploads/2017/02/wp-1487460700801.png https://i1.wp.com/reactscript.com/wp-content/uploads/2018/01/Material-Floating-Buttons-For-React-Native.png?fit=500%2C416&ssl=1&resize=350%2C200

mdb2 pro commented 8 months ago

Ping..................


mdb2 pro answered 8 months ago

Perhaps using tooltip by forcing it open ? Is it clickable ?

Damian Gemza staff answered 8 months ago

Dear mdb2, If you need a fixed button with some captions, you have to experiment on your own how to implement it in the best way. I'll add this feature to our nice-to-have list, and we'll think about implementing it in the future. Best Regards, Damian

mdb2 pro answered 8 months ago

Please do. It is common practice Just adding to a caption direction, like tooltip, would be very easy to implement on your side

mdb2 pro answered 4 months ago

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


mdb2 pro answered 4 months ago

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 4 months 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.


mdb2 pro answered 3 months ago

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 3 months 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.


mdb2 pro commented 3 months ago

Since it breaks my code I cannot update to 7.4.4 When will it be ready ?


Arkadiusz Idzikowski staff commented 3 months ago

We can't provide an ETA yet.


mdb2 pro commented 3 months ago

Then I must use 7.4.0 because it breaks my buttons Is there a workaround I can use ?


mdb2 pro commented 3 months ago

If you break something, you need to fix it


Arkadiusz Idzikowski staff commented 3 months 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.


mdb2 pro commented 3 months 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://i2.wp.com/angularscript.com/wp-content/uploads/2017/08/Material-Design-Float-Button-For-Angular-4.png

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaibCBFq-BmDiKXIocViAVFYVNmU5dUeTcEgAXEZ3ufMy3AN8P

https://androidexample365.com/content/images/2017/08/labels.png

https://i1.wp.com/reactscript.com/wp-content/uploads/2018/01/Material-Floating-Buttons-For-React-Native.png


mdb2 pro answered 3 months ago

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 3 months ago

We will provide a solution for that, probably in next version.


mdb2 pro commented 3 months ago

Great When ? ...


Arkadiusz Idzikowski staff commented 3 months ago

The planned date for release is April 29


mdb2 pro answered 2 months ago

Finally updated to 7.5.2

The new fixed button caption is excellent !


Please insert min. 20 characters.
Status

Resolved

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