Polymer 中下拉菜单的位置和大小答案

【问题标题】：Position and Sizing of Drop Down Menu in PolymerPolymer 中下拉菜单的位置和大小
【发布时间】：2016-04-18 20:32:38
【问题描述】：

我正在学习 Polymer。我喜欢它的很多东西。但是，当涉及到样式项目时，我发现它有点复杂。目前，我正在尝试设置下拉列表的样式，但我似乎无法做一些基本的事情。我创建了一个Plunk here。代码如下所示：

<paper-dropdown-menu label="Team">
  <paper-listbox class="dropdown-content">
    <paper-item>Broncos</paper-item>
    <paper-item>Panthers</paper-item>
    <paper-item>Patriots</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

我正在尝试使下拉箭头 (v) 出现在所选项目的文本旁边，而不是下拉菜单的最右侧。此外，我正在尝试使列表框显示为容器的宽度并正确定位。但是，我没有任何运气。我尝试向下拉内容类添加填充和边距，但没有任何运气。

【问题讨论】：

有人可以帮忙吗？
我不明白关于下拉箭头的部分。您是指打开菜单时将其放置在所选项目旁边吗？
“正确定位”是什么意思？如果你看the paper-dropdown demo，有很多选择
@DanSchnau，我指的是关闭菜单时项目旁边箭头的位置。当菜单关闭时，我试图将“v”放在项目文本旁边。

标签： css polymer paper-elements

【解决方案1】：

不要将这些样式标签添加到div，而是将其添加到paper-dropdown-menu，它应该可以工作。对我来说，它不适用于 IE

paper-dropdown-menu{
     background-color:silver;
     padding-left:48px;
     padding-right:48px;
      width:124px;
   }

我创建了一个Plunk here

【讨论】：

我看着 Plunk。不幸的是，plunk 确实与问题的内容相匹配。事实上，Plunk 看起来与我发布的项目非常相似。

【解决方案2】：

通过查看paper-dropdown-menu 上的演示，您可以看到他们使用 text-align 使文本居中。因此将其更改为 text-align:right;它与箭头对齐。

不确定这是否是您要查找的内容。

paper-dropdown-menu {
  --paper-input-container-underline: {
    display: none;
  }
  --paper-input-container-label: {
    text-align: right;
  }
  paper-item {
    --paper-item-selected-weight: 400;
    --paper-item-focused-before: {
      background: #fff;
    }
  }
}

Plunk here

【讨论】：

我认为问题不在于对齐方式。我认为问题在于iron-input 的宽度或label-and-input-container 的布局方法。我认为是后者。然而，我不知道如何改变它。似乎标签和输入容器 flex 填充了分配的空间。然后，向下箭头放置在该元素之后。如果我能找到一种方法来 a) 使 label-and-input-container 不弯曲或 b) 使 iron-input 的宽度动态而不是它的默认值，我认为它会起作用。我只是需要帮助才能到达那里。