MDL Navigation layout in Google Apps script

Question

I am trying to use MDL navigation layout sample code from here: https://getmdl.io/components/index.html#layout-section in Sidebar html code, see https://developers.google.com/apps-script/guides/dialogs .

It does not render correctly, probably because of some limitation of iframe running my html code in google apps script.

Anyone have idea how to fix that?

edit: I really tried even copypasted code from first link, but here is the code I have:

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span id="title" class="mdl-layout-title"></span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Cloudlytics</span>
    <nav class="mdl-navigation">

      <a class="mdl-navigation__link" href="">Socialbakers Analyze</a>
      <a class="mdl-navigation__link" href="">Help & FAQ</a>
      <a class="mdl-navigation__link" href="">Log out</a>
    </nav>
  </div>
  <main class="mdl-layout__content">

     <div id="things"><div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div></div>
  </main>
</div>

Answer 1

Sidebars have a fixed width (300px) in Google Apps so your MDL layout is bound by that constraint. You may have to override MDL's CSS files with your own styles so they can conform to this limitation.