Question

由于当前纸张下拉菜单实现中的滚动问题，我想让核心菜单适合整个视口，当您点击纸张下拉菜单时，尝试了很多东西，但无法弄清楚而且我被卡住了在影子dom空间。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
  <title>Polymer</title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html" rel="import" />
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&amp;lang=en'>
  <style shim-shadowdom>
    body {
      font-family: 'RobotoDraft', sans-serif;
    }
    :unresolved {
      display: flex;
      justify-content: flex-start;
      background: rgba(255, 255, 255, 0.5);
      border: 2px dashed #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
    :unresolved:after {
      padding: 15px;
      content: 'loading...';
      color: #ccc;
    }
    paper-dropdown-menu {
      border: 2px solid red;
      border-radius: 5px;
      box-sizing: border-box;
    }
  </style>
</head>

<body fullbleed layout vertical>
  <template is="auto-binding">
    <paper-dropdown-menu label="method">
      <paper-dropdown class="dropdown">
        <core-menu class="menu" fullbleed style="margin:0; padding:0;">
          <template repeat="{{ method }}">
            <paper-item>{{}}</paper-item>
          </template>
        </core-menu>
      </paper-dropdown>
    </paper-dropdown-menu>
  </template>
  <script>
    var t = document.querySelector('body > template')
     t.method = [1, 2, 3, 4]
  </script>
</body>

</html>

＆＃13;

Answer 1

您可以将以下CSS添加到样式表中，以使菜单适合视口

html /deep/ paper-dropdown {
    width: 100%;
}

html /deep/ paper-dropdown #scroller{
    width: 100%;
}

.menu{
  width: 100%;
  margin:0; 
  padding:0;
}

您可以找到如下所示的完整示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
  <title>Polymer</title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html" rel="import" />
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&amp;lang=en'>
  <style shim-shadowdom>
    body {
      font-family: 'RobotoDraft', sans-serif;
    }
    :unresolved {
      display: flex;
      justify-content: flex-start;
      background: rgba(255, 255, 255, 0.5);
      border: 2px dashed #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
    :unresolved:after {
      padding: 15px;
      content: 'loading...';
      color: #ccc;
    }
    paper-dropdown-menu {
      border: 2px solid red;
      border-radius: 5px;
      box-sizing: border-box;
    }

    html /deep/ paper-dropdown {
        width: 100%;
    }

    html /deep/ paper-dropdown #scroller{
        width: 100%;
    }

    .menu{
      width: 100%;
      margin:0; 
      padding:0;
    }


  </style>
</head>

<body fullbleed layout vertical>
  <template is="auto-binding">
    <paper-dropdown-menu label="method">
      <paper-dropdown class="dropdown" layout vertical>
        <core-menu class="menu" fullbleed layout vertical>
          <template repeat="{{ method }}">
            <paper-item>{{}}</paper-item>
          </template>
        </core-menu>
      </paper-dropdown>
    </paper-dropdown-menu>
  </template>
  <script>
    var t = document.querySelector('body > template')
     t.method = [1, 2, 3, 4]
  </script>
</body>

</html>

希望这有帮助：）

如何使核心菜单适合完整视口？

1 个答案: