Make FAB Label clickable

Hi, i got 2 questions.

Question 1:
Can you make the floating action button label clickable? I get a lot of my customers thinking they can click on the label with the text and noting happens. The FAB labels in the Google native calendar app are also clickable.

Question 2:
Is it possible to get a transparent background when you open the stacked floating button(s)? Just like with the modal window? That would be great to prevent people from clicking on the wrong element by mistake.

2 Likes

both questions are releated to Css not exactly related to framework 7 app. As far as i understand the classes with label are responsible for the appearance, so you can just place a link having those classes or a button which will make them clickable.
For setting transparent background, you need to override background color property in your template and set it to something like.

 background-color:rgba(0,0,0,0);

Setting its opacity to 0 can be another option but it may have some undesirable effects

Just add this CSS rule:

.fab-label {
  pointer-events: auto;
}

This will require a bit more complex combination of JS + CSS, i think i can add it to next update

2 Likes

Check here Add overly with fab speed dial

1 Like

The fab-label css did the trick, thank you :slight_smile:

This will be a great update for next version :slight_smile:

It works! Thanks Vladimir!