问如何使核心菜单与完整视图相匹配？
EN

Stack Overflow用户

提问于 2015-04-24 19:37:58

回答 1查看 122关注 0票数 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;
    }
  </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>

polymer

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-29 06:03:27

您可以将以下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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29856038

复制

相似问题

问如何使核心菜单与完整视图相匹配？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使核心菜单与完整视图相匹配？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使核心菜单与完整视图相匹配？
EN