bug button floating

Topic: bug button floating

Alex Gotardi pro asked 8 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.

Add comment

Alex Gotardi pro answered 8 years ago

1 0 Best answer

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>

Add comment

Alex Gotardi pro answered 8 years ago

0 0 Best answer

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>

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

What version of MDB do you use?

Add comment

Alex Gotardi pro answered 8 years ago

0 0 Best answer

Thanks for return. Version 4.1

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

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

Add comment

Alex Gotardi pro answered 8 years ago

0 0 Best answer

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.

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

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;
        }
    });

Add comment

Juan Ramos Suyón answered 8 years ago

0 0 Best answer

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

Add comment

Antonio J Vaillo answered 7 years ago

0 0 Best answer

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');
});

Add comment

john.acb answered 5 years ago

0 0 Best answer

Is the FAB button available for Angular version?

Bartłomiej Malanowski staff pro premium commented 5 years ago

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

Add comment

Write

Create snippet

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

About author

Alex Gotardi

Pro User

33Support score
7Questions 17Answers

0Snippets likes 0Snippets