Topic: Adding captions to fixed buttons

itay pro asked 6 years 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 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, Damian

itay 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, Damian

itay 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, Damian

itay 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

itay pro answered 5 years ago


Finally updated to 7.5.2

The new fixed button caption is excellent !


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


itay pro answered 5 years 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 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://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


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


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


itay pro answered 5 years ago


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

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

itay pro answered 5 years ago


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

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

itay pro commented 5 years ago

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


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

itay pro commented 5 years ago

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

itay pro answered 5 years ago


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

itay pro answered 6 years ago


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


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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags