bug button floating

Topic: bug button floating

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

john.acb free answered 4 years ago

0 0 Best answer

Is the FAB button available for Angular version?

Bartłomiej Malanowski staff commented 4 years ago

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

Add comment

Antonio J Vaillo free answered 6 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

Juan Ramos Suyón free answered 7 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

Michal Szymanski staff answered 7 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:

<pre><code>        $('#test') .click(function() {
  alert( "Handler for .click() called." );
});</code></pre>

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

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

Please insert min. 20 characters.

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

Michal Szymanski staff answered 7 years ago

0 0 Best answer

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

Add comment

Alex Gotardi pro answered 7 years ago

1 0 Best answer

Expectative: On click in link, URL file.htm#dontwork
But...

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

<link href="/css/bootstrap.min.css" rel="stylesheet">

<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>

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

<script type="text/javascript" src="/js/tether.min.js"></script>

<script type="text/javascript" src="/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/js/mdb.js"></script>

<script>
    new WOW().init();
</script>

</body>
</html></code></pre>

Please insert min. 20 characters.

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

Michal Szymanski staff answered 7 years ago

0 0 Best answer

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

Add comment

Alex Gotardi pro answered 7 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 answered 7 years ago

0 0 Best answer

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

Add comment

Alex Gotardi pro answered 7 years ago

0 0 Best answer

Thanks for return. Version 4.1

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

What version of MDB do you use?

Add comment

Alex Gotardi pro answered 7 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

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

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Alex Gotardi

Pro User 33Support score
7Questions 17Answers 0Snippets