Fixed Action Button in Materializecss does not work

Asked

Viewed 500 times

1

It just doesn’t work, the button even appears but none of the buttons work. I tried using materialize via CDN and local but there was no change. I believe there is no error in the code because after a lot of trying and not working I took the example of the site itself and still nothing... follows code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TESTES</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

    <!-- MATERIAL ICONS -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <body>
    <div class="fixed-action-btn horizontal">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
      </a>
      <ul>
        <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
        <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
      </ul>
    </div>
  </body>

</html>
javascript css html5 materialize

1 answer

1


According to the documentation itself, you missed importing jQuery before the JS of Materialize, in this way:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

Another thing: it is always good practice to add the scripts at the end of the body because it optimizes the display time of the page:

<body>
  ... conteudo
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</body>

Source: http://materializecss.com/getting-started.html

  • Boy, how did I miss it huh? And look who spent a good time doing and undoing, looking for mistakes! Thanks for the help!

Browser other questions tagged javascript css html5 materialize

You are not signed in. Login or sign up in order to post.