Search code examples
meteoriron-routermaterial-design-lite

Material Design Lite layout has changed after installing Iron:router

I created a meteor project and added krazyeom:material-design-lite package. Then I created 2 simple html files, one that contains 

<head>...</head>

and another that contains 

<body>...</body>

My design looks something like this:

Layout with full-height menu

After I added the iron:router and only replaced <body> with <template name="layout"> and </body> with </template>. 

Router.route('/', {name: 'layout'});

It looks like this:

Broken layout with non full-height menu

As you can see the design is now not 100% height; and if I resize to mobile resolution, it doesn't appear the 3 lines icon to show the sidebar.

What could be the problem ?

Solution

  • Well i had the same issues.As of now there is some issues while using mdl with iron router . Even there are issues with Template.xyz.events not firing with mdl custom tags .

    This issues will be resloved soon (Hope so)

    https://github.com/Zodiase/meteor-mdl

    This repo is under active development in supporting mdl in meteor . Please follow this repo for any advancement.

    Other wise use similar addon like https://atmospherejs.com/materialize/materialize

    which does the material design like mdl and i am using it for couple of my project and have no issues