CODEWITHSUNDEEP
javascriptjquerycssruby-on-railsmaterialize
Sebastian Plasschaert
Sebastian Plasschaert

Reputation: 304

Materialize Tabs suddenly doesn't work anymore

I'm using the Tabs Javascipt from Materialize in several Rails projects. But suddenly in my last project it doesn't work any-more (it did work some commits ago, but I can't seem to solve it).

I've added a demo-snippet (the one from Materialize, including the intitializer) to a blank page to see if it's page related, but also on this page (controlled by a different controller) it doesn't seem to work.

It's just showing the content in 1 list, doesn't show the activated bar and when clicking it, it jumps to div within the list of content.

Here's my simple About page:

<h3>About Us</h3>

<div class="row">
<div class="col s12">
  <ul class="tabs">
    <li class="tab col s3"><a href="#test1">Test 1</a></li>
    <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab col s3"><a href="#test4">Test 4</a></li>
  </ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>


<script>
$(document).ready(function(){
$('ul.tabs').tabs();
  });
</script>

...and here's the link to the page: About Page

Can anyone help me out to solve this? (I'm probably overlooking something simple)

Upvotes: 2

Views: 2801

Answers (1)

karlisup
karlisup

Reputation: 682

For me it seems that you have forgotten to add jQuery & materialize JavaScript libraries.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

Both examples:

  1. codepen
  2. StackOverflow one below

works. Make sure that you add jQuery before Materialize.

$(document).ready(function(){
    $('ul.tabs').tabs();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>

Good luck mate ;)

Upvotes: 4

Related Questions