CODEWITHSUNDEEP
javascriptjquerymeteormaterialize
user3299029
user3299029

Reputation: 11

Materialize navbar not working in Meteor

I have a Meteor project where I'm playing with the Materialize framework. I've installed iron:router, materialize:materialize, cfs:standard-packages, and cfs:gridfs.

What I've run into though is the navbar not working correctly. I've followed the documentation at http://materializecss.com but no luck. My code and recommended code is below.

<template name="nav">

<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

            <!-- Dropdown Structure -->
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
            </ul>
        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>

It is recommended to use the following code to initialize the navbar collapse functionality (this comes from the materialize docs)

$(".button-collapse").sideNav();

I've tried this and it doesn't work.

Also, if you look at my navbar code below a dropdown is included. However, using the recommended code in the materialize docs the dropdown will not work. The recommended code is below.

$(".dropdown-button").dropdown();

The jQuery code I included for my dropdown also came from the materialize docs but still didn't work. And it follows the convention above but with several options set.

$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false, // Displays dropdown below the button
  alignment: 'left' // Displays dropdown with edge aligned to the left of button
}

);

Upvotes: 0

Views: 1222

Answers (2)

ericvrp
ericvrp

Reputation: 11

I use this code...

Template.navbar.onRendered(function(){ $(".sidenav-icon").sideNav({ closeOnClick: true }); // http://materializecss.com/side-nav.html });

Replace navbar with your template name. You are calling .sideNav() before the template is rendered. To test this working your hack works. Calling the sideNav function on the developer console after the template is shown is another way.

Upvotes: 1

user3299029
user3299029

Reputation: 11

After much searching and contemplating I came up with the fix. I think. It works though. :)

After all that searching and contemplating though it came to me to just tie the buttons/links to the template using Meteor.templateName.events. Below is the code I added to core.js (that's the file I'm using for all the javascript code for the core files. (_head.html, _footer.html, home.html, _nav.html)

Template.nav.events({
'click .button-collapse': function(event){
    $('.button-collapse').sideNav();
},
'click .dropdown-button': function(event){
    $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        constrain_width: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left' // Displays dropdown with edge aligned to the left of button
        }
    );
}

});

As you can see, I used the recommended jQuery code, but wrapped it in a Meteor 'click' event. As I said, it works, although it takes a couple of seconds to reach full functionality. I suppose it has to do with load times or something. I know there's a fix for that, but I'm not sure yet what that is. :)

Upvotes: 0

Related Questions