Material-design-lite: Layout spacer is not working in drawer

[kushdilip]

Adding <div class="mdl-layout-spacer"></div> in drawer navigation doesn't work.
Here is the Codepen http://codepen.io/kushdilip/pen/eNqYpO

I have tried layout spacer with material 1.0.0, 1.0.1, 1.0.2 and 1.0.3 as well. none of them worked.

[Bound3R]

you can use mdl-cell--hide-desktop if the intention is to hide the mdl-layout__drawer.

that's what you want to do?

[tleunen]

It works in this template: http://www.getmdl.io/templates/dashboard/index.html

Probably because they redefine the style on mdl-navigation__link as flexbox. Might be a good idea to set that by default then?

[Bound3R]

@tleunen I think that was already suggested templates for some other issue

[kushdilip]

@Bound3R I don't want to hide the drawer. My intention is to get exactly what is achieved in http://www.getmdl.io/templates/dashboard/index.html

[kingstenbanh]

To produce the same effect as the template, you can add flex-grow: 1; to the mdl-navigation class as show below

<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">MDL 1.0.4</span>
    <nav class="mdl-navigation" style="flex-grow: 1;">
      <a class="mdl-navigation__link" href="">Link</a>
      <div class="mdl-layout-spacer"></div>
      <a class="mdl-navigation__link" href="">Logo</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

[Garbee]

Instead of using an inline style, just use the spacer class on the nav.

<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">MDL 1.0.4</span>
    <nav class="mdl-navigation mdl-layout-spacer">
      <a class="mdl-navigation__link" href="">Link</a>
      <div class="mdl-layout-spacer"></div>
      <a class="mdl-navigation__link" href="">Logo</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

[kushdilip]

@Garbee Thanks for the brilliant solution. Should I close this issue ?
@kingstenbanh thanks.