Question

我正在尝试使用此处的MDL导航布局示例代码：补充工具栏HTML代码中的https://getmdl.io/components/index.html#layout-section，请参阅https://developers.google.com/apps-script/guides/dialogs。

它无法正确呈现，可能是因为在Google Apps应用脚本中运行我的html代码的iframe存在一些限制。

任何人都知道如何解决这个问题？

编辑：我真的尝试过从第一个链接复制代码，但这里是我的代码：

<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 Apps中具有固定宽度（300px），因此您的MDL布局受该约束的约束。您可能必须使用自己的样式覆盖MDL的CSS文件，以便它们符合此限制。

Google Apps脚本中的MDL导航布局

1 个答案: