Question

我有以下代码：

      <paper-dropdown-menu id="mydropdown" label="City?">
        <paper-listbox class="dropdown-content">
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>

但如下图所示，dropdown-content的宽度非常小。如何以干净的方式将宽度设置为与实际paper-dropdown-menu相同的大小？

Answer 1

我相信我已经在jsfiddle创建了您要找的内容。

或者如果您愿意，这里是代码段

＆＃13;

.custom {
  width: 190px;
}
.custom2 {
  width: 400px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="//polygit.org/components/">

  <link rel="import" href="polymer/polymer.html">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">

</head>

<body unresolved>
  <dom-module id='base-page'>
    <template>
      <paper-dropdown-menu id="mydropdown" class="custom" label="City?">
        <paper-listbox class="dropdown-content custom" horizontalAlign='left'>
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <br>
      <paper-dropdown-menu id="mydropdown" class="custom2" label="City?">
        <paper-listbox class="dropdown-content custom2" horizontalAlign='left'>
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'base-page',
        properties: {}
      });
    });
  </script>
  <base-page></base-page>
</body>

</html>

＆＃13;

我所做的就是创建了一个自定义类，它同时应用于下拉菜单和列表框，它们为每个类提供了相同的宽度。我相信190px是默认的，但是一旦你上课了，你就可以根据自己的需要调整它。

Answer 2

在此，您可以根据iron-dropdown调整宽度，left 0和width:100%

    .custom {
      width: 100%;
    }

    .custom2 {
      width: 100%;
    }
    iron-dropdown{
      left:0 !important;
      width:100% !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <base href="//polygit.org/components/">

      <link rel="import" href="polymer/polymer.html">
      <script src="webcomponentsjs/webcomponents-lite.js"></script>

      <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
      <link rel="import" href="paper-item/paper-item.html">
      <link rel="import" href="paper-listbox/paper-listbox.html">

    </head>

    <body unresolved>
      <dom-module id='base-page'>
        <template>
          <paper-dropdown-menu id="mydropdown" class="custom" label="City?">
            <paper-listbox class="dropdown-content custom" horizontalAlign='left'>
              <paper-item>Inbox</paper-item>
              <paper-item>Starred</paper-item>
              <paper-item>Sent mail</paper-item>
              <paper-item>Drafts</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>
          <br>
          <paper-dropdown-menu id="mydropdown" class="custom2" label="City?">
            <paper-listbox class="dropdown-content custom2" horizontalAlign='left'>
              <paper-item>Inbox</paper-item>
              <paper-item>Starred</paper-item>
              <paper-item>Sent mail</paper-item>
              <paper-item>Drafts</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>
        </template>
      </dom-module>
      <script>
        HTMLImports.whenReady(function() {
          Polymer({
            is: 'base-page',
            properties: {}
          });
        });
      </script>
      <base-page></base-page>
    </body>

    </html>

Answer 3

实际上我相信@aditya shrivastava和@jarod moser的两个答案如果你想要它的纯粹＆＃34;聚合物风格。

这是我的推理：

你使用的是没有被聚合物
样式正在通过DOM树流出，而Polymer不是这样的。

所以我的解决方案在这里：

设置其他两个答案中建议的输入宽度
借助CSS Mixin设置下拉列表：

.custom2 {
  --paper-dropdown-menu-button: {
     left: 0;
     width: 100%;
  };
}

当CSS被重写时，Mixin会被应用到下拉框 - 实际上是铁下拉。请参阅以下文档：https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-mixins

然后您的代码应遵循以下基本设置：

<dom-module id="some-kind-of-element">
  <style>
    #mydropdown {
      --paper-dropdown-menu-button: {
        left: 0;
        width: 100%;
      };
    }
  </style>

  <template>
    <paper-dropdown-menu id="mydropdown" label="City?">
        <paper-listbox class="dropdown-content">
          <paper-item>Inbox</paper-item>
          <paper-item>Starred</paper-item>
          <paper-item>Sent mail</paper-item>
          <paper-item>Drafts</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
  </template>
</dom-module>

我现在对选择器没有百分之百的肯定，但是你可以在网络检查器中看到如何将样式添加到paper-dropdown-menu元素中的元素。请参阅聚合物：https://elements.polymer-project.org/elements/paper-dropdown-menu中的元素文档，以找到CSS Mixins可以为您提供的指导并与它们一起玩，直到您指明它为止。也许您还必须使用!important CSS属性修饰符来否决默认设置。

自定义CSS在Polymer ......中仍然很烦人。

Answer 4

制作＆＃39;下拉内容＆＃39;取决于纸张下拉菜单的宽度：

创建自己的菜单：

< resizable-dropdown-menu >

复制

< paper-dropdown-menu-light >

中的所有组件（我更喜欢）或

< paper-dropdown-menu >

导入IronResizableBehavior 输入

＆＃13;

<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

＆＃13;

添加Polymer.IronResizableBehavior

＆＃13;

behaviors: [
            //...
            Polymer.IronValidatableBehavior,
            Polymer.IronResizableBehavior    // add this
          ],

＆＃13;

将此添加到附加功能：

＆＃13;

/*
 *
 * to make menu the same width as container;
 *
 */

var ironDropdown = Polymer.dom(this.$.menuButton.root).querySelector('iron-dropdown');
this.addEventListener('iron-resize', (e) => {
  ironDropdown.style.width = Polymer.dom(this.root).node.host.offsetWidth+'px';
});

＆＃13;

制作＆＃39;下拉内容＆＃39;与纸张下拉菜单相同的宽度？

4 个答案: