Tabs in cards not working

[jlfernandez83]

Tabs in cards are not working in new v.1.0.0.

I have tested on starter template.

Let me know if you need further information.

Thanks for your help.

[acburst]

Can you post a codepen reproducing this issue?

[jlfernandez83]

Sure!

https://codepen.io/jlfernandez83/pen/pVEbRY

[MicheleLucini]

You missed initializazion? I added jquery and materializa css/js and it works

[jlfernandez83]

That's true, Michele.

I changed jquery initialization to M.AutoInit(), as jQuery is not a dependency anymore.

https://codepen.io/jlfernandez83/pen/pVEbRY

Anyway, I think it should be specified in docs how to exactly init just cards, as with other components.

http://materializecss.com/cards.html

For example, the initialization of carousel element is specified to be :

var elem = document.querySelector('.carousel'); var instance = M.Carousel.init(elem, options);

Am I right? What do you, guys, think?

[MicheleLucini]

It works nicely, well done.

[MicheleLucini]

Cards do not need initialization, they don't use js unlike tabs.

[MicheleLucini]

M.AutoInit(); works but I personally would use the specific version for the tabs you want to init only, the generic init may interfere with others materialize components.

[MicheleLucini]

var elem = document.querySelector('.tabs'); var instance = M.Tabs.init(elem, {});

[jlfernandez83]

Thanks for your time Michele, it seems I was looking just the "cards" page ("Tabs in Cards" section) so I didn't realize I had to initialize tabs in js. That was causing the problem.

Cheers!

[jahuanca]

hello and if you want to instantiate all the elements instead of one by one, how would the code be? help, I'm new to this, in js and materializecss, thanks

[jahuanca]

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      var instances = M.AutoInit();
      });
  </script>

Así inicializo todos los componentes yo, espero te sirva y si estoy mal corrijanme.

[wycliffogembo87]

Hi, I am trying to initialize all the elements using the syntax above, but it only works in firefox and not chrome. What might be causing this behavior. Kindly assist, thanks.

[arvind0598]

Thanks for your time Michele, it seems I was looking just the "cards" page ("Tabs in Cards" section) so I didn't realize I had to initialize tabs in js. That was causing the problem.

Cheers!

This is the same issue I had. Since this issue is still open, should I add the solution that @MicheleLucini provided to the docs?

[InnanaDM]

var elem = document.querySelector('.tabs'); var instance = M.Tabs.init(elem, {});

THIS WORKS!

[rodolph66]

Hi All, Regarding the card tabs the documentation is still missing the initialization step. I wrecked my brains before I was able to find this post. However, although the mentioned initialization worked for one instant of the card with tabs, when creating another it did not work. That is when creating two identical cards with tabs, the first works ok but strangely the second does not! Does that mean each instance require its own initialization ?!!!

[rodolph66]

Apparently each instance does need its own initialization. I was able to finally resolve my issue by applying a different id to each ul tag with class="tabs" then initialize each based on the id.

var tabElems1 = document.querySelector("#tabs1");
var tabInstances1 = M.Tabs.init(tabElems1, {});

var tabElems2 = document.querySelector("#tabs2");
var tabInstances2 = M.Tabs.init(tabElems2, {});

[NMNaufaldo]

This is work, but the docs did not say to include this

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

[ABDULAZIZ94]

This is work, but the docs did not say to include this

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

thank you @NMNaufaldo, it helpful to me

[thiagoteberga]

Thanks @MicheleLucini your answer helped me a lot!