Google Apps 脚本中的 MDL 导航布局

Question

我正在尝试使用此处的 MDL 导航布局示例代码：https://getmdl.io/components/index.html#layout-section in Sidebar html code, see https://developers.google.com/apps-script/guides/dialogs .

它无法正确呈现，可能是因为 iframe 运行我的 html 代码在 google 应用程序脚本中的某些限制。

有人知道如何解决这个问题吗？

编辑：我什至尝试过从第一个 link 复制粘贴的代码，但这是我的代码：

<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

侧边栏在 Google 应用程序中具有固定宽度 (300px)，因此您的 MDL 布局受该限制约束。您可能需要用自己的样式覆盖 MDL 的 CSS 文件，以便它们符合此限制。

Google Apps 脚本中的 MDL 导航布局

MDL Navigation layout in Google Apps script

google-apps-script

material-design

material-design-lite