The layout is broken when using material design lite in ember js

When I implement my ember web using material design lite. The following problems exist.

1.The header displays incorrect (the title is disappeared). 2.The drawer cant display in full-screen too.

Here is my code

application.hbs

<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">


    <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
            <header class="demo-drawer-header">

              <div class="demo-avatar-dropdown">
                <span>hello@example.com</span>
                <div class="mdl-layout-spacer"></div>

              </div>
            </header>
            <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
            <i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>My Task
              <a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
            </nav>
          </div>


    
    </div>

mytask.hbs

<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">My Task</span>
          <div class="mdl-layout-spacer"></div>


        </div>
</header>  

<main class="mdl-layout__content mdl-color--grey-100">
        <div class="mdl-grid demo-content">   
</div>
</main>

ember-cli-builds.js

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

app.import('bower_components/mdl/material.min.css');
app.import('bower_components/mdl/material.min.js');
app.import('vendor/styles.css');
  return app.toTree();
};