[SOLVED] Can not get FAB working properly

Questions
1

As I understand, we can not change direction for speed-dial-buttons, on docs page if I fab is at top , button opens to bottom, if I fab is left-bottom, buttons open to right

however code below there is no action when I click on the button, can someone help me ?

Whatever I do it stills open to bottom, how can I change to open it to right ?

    #tab-1.page-content(:class="tabActiveChat")
      .page-content.messages-content.a
        .chat-div(v-for='message in filtredMessages', :key='message.timestamp', v-if='renderMessages')
          left-chat-bubble.leftBBl.messageLine(:message='message', v-if='message.sender === conversationId', :contact='selectedContacts[0]')
          right-chat-bubble.rightBBl.messageLine(:message='message', v-else)
      .toolbar.toolbar-bottom-md.messagebar
        .toolbar-inner
          .fab.fab-left-bottom.color-orange
           a(href="#")
            // Icons For iOS Theme
            i.icon.f7-icons.ios-only add
            i.icon.f7-icons.ios-only close
            // Icons For MD Theme
            i.icon.material-icons.md-only add
            i.icon.material-icons.md-only close
           // FAB speed dial actions
           .fab-buttons.fab-buttons-bottom
            a(href="") 1
            a(href="") 2
            a(href="") 3

fab2

2

Look at http://framework7.io/docs/floating-action-button.html#speed-dial
You have fab-buttons-bottom class, that is why they opening on the bottom

2 Likes