Search code examples
javascripthtmlcsselectronmaterialize

Materialize-CSS Navbar with tabs not working on Electron

Tabs in a Navbar using Materialize-CSS in Electron dosen't work. The tabs dosen't change and their content isn't being displayed correctly.

Some code is just copy and paste from templates or documentation pages, I'm learning JS and HTML with Electron.

https://codepen.io/anon/pen/eyVQKx

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--Diz ao Electron que o App é optimizado para várias telas-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <title>Whiteflag's Developer Tools</title>

        <!--Importando Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!--Importando materialize.css-->
        <link type="text/css" rel="stylesheet" 
        href="./assets/materialize-css/css/materialize.min.css"  media="screen,projection"/>

        <!-- Script Requerido antes de Importar Scripts  -->
        <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

            <!-- Importando Scripts -->
            <script src="./assets/jquery/dist/jquery.min.js"></script>                
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
            crossorigin="anonymous"></script>
            <script> require('./renderer.js'); </script>
            <script type="text/javascript" src="./assets/materialize-css/js/materialize.min.js"></script>
            <script> window.$ = window.jQuery = require('./assets/jquery/dist/jquery.min.js');</script>
            <script> window.Hammer = require('./assets/hammer/hammer.min.js');</script>

        <!-- Script Requerido depois de Importar Scripts -->
        <script>if (window.module) module = window.module;</script>

    </head>

    <!-- Navbar do aplicativo, componente do MaterializeCSS -->
    <div class="navbar-fixed">
        <nav class="nav-extended" id="navbar">
            <div class="nav-wrapper">
                <a href="#" class="brand-logo center">Developer Tools</a>
            </div>
            <div class="nav-content" id="navbarcontent">
                <ul class="tabs tabs-transparent tabs-fixed-width" id="tabs">
                <li class="tab"><a href="#test1">Test 1</a></li>
                <li class="tab"><a class="active" href="#test2">Test 2</a></li>
                <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
                <li class="tab"><a href="#test4">Test 4</a></li>
                </ul>
            </div>
        </nav>
    </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>

There is no Modification in the Libraries and CSS files.

Thanks. Waiting for a Response.

Solution

  • I have update your codepen https://codepen.io/anon/pen/WgKwje

    If you want to get it worked with electron.

    npm install materialize-css@next

    then include materialize css and js in index.html at the end of body tag call M.AutoInit()

    <script>M.AutoInit();</script>