Alex Gotardi pro asked 6 years ago


Example: http://mdbootstrap.com/components/buttons/ Button floating on bottom/right, on hover mouse, list up options, on click in any icon and move mouse for left/right the list return.

john.acb free answered 3 years ago


Is the FAB button available for Angular version?


Bartłomiej Malanowski staff commented 3 years ago

Yes. You can find it here: https://mdbootstrap.com/docs/angular/components/buttons/#fixed-buttons


Antonio J Vaillo free answered 4 years ago


If you don't want to modifiy the mdb.js, you could use another js file and unbind with jquery the click action when document ready:
$(document).ready(function(){
    $('.fixed-action-btn').unbind('click');
});

Juan Ramos Suyón free answered 5 years ago


It would be nice if MDB prevents the link only when href="#". Thank you for the clarification.

Michal Szymanski staff answered 6 years ago


I have answer and solution for you: Everything works as expected. Event binding works fine. You can test it with the code below:
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large btn-default waves-effect waves-light">
        <i class="fa fa-bolt"></i>
    </a>
    <ul>
        <li>
            <a id="test" type="button" role="button" href="http://mdbootstrap.com/"  class="btn-floating btn-primary"><i class="fa fa-plus"></i></a>
        </li>
    </ul>
</div>
        $('#test') .click(function() {
  alert( "Handler for .click() called." );
});
However MDB prevents you from using the link inside child buttons of FAB, because it should be using for event bindings, not links. If you want to change it, open mdb.js and remove (or comment) code from 6175 to 6181 line
    $('.fixed-action-btn').on({
        click: function (e) {
            e.preventDefault();
            toggleFABMenu($('.fixed-action-btn'));
            return false;
        }
    });

Michal Szymanski staff answered 6 years ago


We'll investigate the problem and fix it in the next update (probably next week).

Alex Gotardi pro answered 6 years ago


Expectative: On click in link, URL file.htm#dontwork But...
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="/assets/font-awesome/4.6.3/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.min.css" rel="stylesheet">

</head>
<body>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large btn-default waves-effect waves-light">
        <i class="fa fa-bolt"></i>
    </a>
    <ul>
        <li>
            <a type="button" role="button" href="#dontwork" class="btn-floating btn-primary"><i class="fa fa-plus"></i></a>
        </li>
    </ul>
</div>

<!-- SCRIPTS -->

<!-- JQuery -->
<script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="/js/mdb.js"></script>

<!-- Animations init-->
<script>
    new WOW().init();
</script>

</body>
</html>

Michal Szymanski staff answered 6 years ago


Send me please your code on m.szymanski@mdbootstrap.com . I'll investigate the problem.

Alex Gotardi pro answered 6 years ago


Pro version. I create a new html file, include dependencies (jquery, bootstrap, mdb), add code and dont work... The button navigation is ok, on mouse enter, icon plus is visible, but on click no event work.

Michal Szymanski staff answered 6 years ago


Your code works for me. Do you use Pro or Free version?

Alex Gotardi pro answered 6 years ago


Thanks for return. Version 4.1

Michal Szymanski staff answered 6 years ago


What version of MDB do you use?

Alex Gotardi pro answered 6 years ago


how to add action to sub button floating "fixed-action-btn" too? Here dont work! Ex.
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large btn-default waves-effect waves-light">
        <i class="fa fa-ellipsis-v"></i>
    </a>
    <ul>
        <li>
            <a type="button" role="button" href="#!!!!" class="btn-floating btn-primary"><i class="fa fa-plus"></i></a>
        </li>
    </ul>
</div>


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: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags