Search code examples
cordovameteormaterialize

Behaviour of materialize navbar is broken when meteor app is compiled for android

I'm currently attempting to make a material design version of the simple todos tutorial app on the meteor website. I'm however having an issue getting the nav bar buttons to actually do anything when touched when the app is compiled for android. A gif of the issue - https://i.sstatic.net/JZcqS.gif

HTML Snippit:

<header class="fixed-navbar">
    <nav class="light-blue" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo">Simple Tasks</a>

            <ul class="left hamburger">
                <li><a href="#" class="categories hide-on-large-only" data-activates="mobile-demo"><i
                        class="mdi-navigation-menu"></i></a></li>
            </ul>

            <ul class="right">
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu</a></li>
            </ul>


            <ul id="dropdown1" class="dropdown-content">
                <li><a href="#!">Account</a></li>
                <li><a href="#!">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#!">About</a></li>
            </ul>
        </div>
    </nav>
</header>

<div class="side-nav fixed" id="mobile-demo" style="  min-height: 100%;">
    <div class="sidebar">
        <ul>
            <li><a href="">All Tasks</a></li>
            <li><a href="">Unsorted</a></li>
            <li><a href="">Placeholder</a></li>
            <li><a href="">Another Placeholder</a></li>
        </ul>
    </div>

</div>

Relevant Javascript:

if (Meteor.isClient) {
    $( document ).ready(function(){
        console.log("Document ready!");
        $(".categories").sideNav();
    });
}

The materialize css and javascript is included in the app project via a forked version of this package that uses the latest version of materialize (alpha release v0.96.1)

Any help is appreciated!

Solution

  • Most likely this is caused by a javascript error in your code.

    Typically in development mode your files aren't concatenated so if you have an error it won't stop any of the rest of your app from working.

    This is different in production mode. If you have a single js exception none of the rest of the code will run. This is probably why it is as if the JS didn't run to set up the side nav click events.

    To fix this load up your app with a javascript console in development mode and find the JS error and fix it. Once you do this it should work fine in production mode.

    Also it's best to run $(".categories").sideNav(); in your template's onrendered callback, though this may not be your issue:

    Template.xxxx.onRendered(function() {
    $(".categories").sideNav();
});

    where xxxx is the template containing your .categories navbar.