Problem with float button

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Problem with float button

giorgio.ponza pro premium priority asked 7 years ago

Hello. I want to use a fixed floating button with some actions inside. I copy/paste the example and then i add the href attribute for the 4 links, but when i click on that buttons, nothing happens. I've read some similar questions, but still cannot find a solution. What i mean is that when i click on the fixed button, the following icons must appear:
  • edit (pointing to href /artists/edit)
  • delete (pointing to href /artists/delete)
I also noticed that if i move the floating button on upper right corner, action icons still appear in the bottom right corner. I use the new MDBoostrap 4.4.1 Pro

Ollie Vincent pro answered 7 years ago

Hi all,

I found a work around when I commented on https://mdbootstrap.com/support/fixed-button-with-waves-does-not-work/ with a solution.

Use the code below to get external links working.

$(document).ready(function () {

$('.fixed-action-btn').unbind('click');

});

I have no idea if it works on multiple fixed buttons - so you might need to customise.

Marta Szymanska staff pro premium answered 7 years ago

Hi,

find this code in our mdb.js:

$('.fixed-action-btn').on({
click: function click(e) {
e.preventDefault();
toggleFABMenu($('.fixed-action-btn'));
return false;
}
});

comment these lines, save the file and minify.

This piece of code cause you can't go to another website.

Best,

Marta

Marta Szymanska staff pro premium answered 7 years ago

Hi, could you send me a file with your code to m.szymanska@mdbootstrap.com? I'll see the problem and I'll help you. Best, Marta

Gautam Chaudhary pro premium priority commented 7 years ago

Any update about the same. Same issue here. Actually clicking on the link of the fixed floating button triggers (close list) rather than opening the link defined to the <li>. Another issue: On mobile, it takes at least two touches (on the main floating btn) to open the btn in<li> <pre> <div class="fixed-action-btn" style="bottom: 10px; right: 10px;"> <a class="btn-floating rgba-red-strong"> <i class="fa fa-arrows-alt"></i> </a> <ul> <li><a href="https://google.com" target="_blank" class="btn-floating btn-sm bg-primary"><i class="fa fa-map-marker"></i></a></li> <li><a href="https://google.com" target="_blank" class="btn-floating btn-sm orange"><i class="fa fa-puzzle-piece"></i></a></li> </ul> </div> </pre>

Marta Szymanska staff pro premium answered 7 years ago

Hi, We're really sorry for this issue and as you told us now about this issue, for sure we will look at this and try to fix in next release, because we didn't know abou this bug. But now I don't have any workaround for this issue. Best, Marta

tmurzens pro answered 7 years ago

Any update on this? I'm seeing the same problem. I would like to open a new window with a URL when clicking a popup button within a Fixed Button.

Marta Szymanska staff pro premium answered 7 years ago

Hi, Once again, I apologize for the long wait, we will fix this error soon. Best, Marta

tmurzens pro answered 7 years ago

There are two situations that don't seem to work: 1 - A fixed button with no popup buttons won't open an HREF. For example if you wanted a button with a plus sign to go to a "create" page. 2 - A fixed button with popup buttons - the popup buttons will call a javascript function, but they won't open an HREF. I would like to be able to have a mixture of javascript actions and HREFs in the popup buttons. These seem like pretty normal and expected behavior?

yddap17 pro answered 6 years ago

Is there any Update in this? I think this is still not solved right now? With the provided solution of Marta, the popup list elements are not clickable either. Only whithout the <li></li> Tags. And the next question would be, how to solve the hover Problem on mobile devices. For now a mobile user can only use then the big non-popup fixed button, because there is no hover... The popup list element won't be activated because of the href. Hope this gets solved soon      

yddap17 pro commented 6 years ago

Jquery Version 4.5.7

Marta Szymanska staff pro premium answered 6 years ago

Hi, for now, we don't have a better solution than this one sent by me before. We will try to fix this as soon as possible. I apologize for the problems. Best, Marta

jmesserer pro answered 6 years ago

Is there an update on this fix?

I tried to apply the manual fix mentioned above in 4.7.0 but I'm not finding a line matching "$('.fixed-action-btn').on({" ... can you please advise what line numbers I should comment out in mdb.js for 4.7.0?

giorgio.ponza pro premium priority commented 6 years ago

Hi jmesserer, they still have this bug open. While waiting for a fix, i usually comment the following piece of javascript in mdb.js (for versione 4.5.12+)

$('.fixed-action-btn:not(.smooth-scroll) > .btn-floating').on('click', function (e) { if (!$(_this).hasClass('smooth-scroll')) { e.preventDefault(); toggleFABMenu($('.fixed-action-btn')); return false; } });

Marta Szymanska staff pro premium answered 6 years ago

Hi,

Have you seen this post on our support forum: https://mdbootstrap.com/support/jquery/fixed-button-doesnt-work/? There is a snippet with working foxed action button.

Best, Marta

Write
Create snippet
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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
giorgio.ponza
Pro User Premium support
87Support score
10Questions 3Answers
0Snippets likes 3Snippets