在Polymer 1.0中，将纸张下拉菜单与纸张输入对齐_Polymer

在Polymer 1.0中，将纸张下拉菜单与纸张输入对齐

polymer

在Polymer 1.0中，将纸张下拉菜单与纸张输入对齐,polymer,Polymer,我举了以下例子： <!doctype html> <html> <head> <script src='bower_components/webcomponentsjs/webcomponents.min.js'></script> <link rel="import" href="bower_components/polymer/polymer.html"/> <link rel='impor

我举了以下例子：

<!doctype html>
<html>
<head>
    <script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
    <link rel="import" href="bower_components/polymer/polymer.html"/>
    <link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
    <link rel='import' href='bower_components/paper-item/paper-item.html'>
    <link rel='import' href='bower_components/paper-menu/paper-menu.html'>
    <link rel='import' href='bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
    <link rel='import' href='bower_components/paper-input/paper-input.html'>
</head>
<body>
    <div style='width:400px'>
        <paper-input label='Input label' class='inputbox'></paper-input>
        <paper-dropdown-menu label='Drop down label'>
            <paper-menu class='dropdown-content'>
                <paper-item>A</paper-item>
                <paper-item>B</paper-item>
            </paper-menu>
        </paper-dropdown-menu>            
    </div>
</body>
</html>

在这里，我试图让纸张下拉菜单在宽度和填充方面表现得像纸张输入，但我很难让它与输入对齐。纸张下拉菜单中似乎有一些空白，我无法让它像默认输入那样接受100%宽度的填充。我能做什么

谢谢:-

干杯 Franz Thomsen

在纸张下拉菜单中，有一个纸张菜单按钮，其样式也需要更新

  paper-dropdown-menu {
    width: 100%;
  }

  paper-dropdown-menu paper-menu-button {
    width: 100%;      
    padding: 0;
  }

查看此项。

如果您查看github上的纸张下拉菜单。您将看到它是使用一些其他元素构建的，如纸张输入、纸张项目等。这些是纸张下拉菜单的子元素

要访问这些子元素的CSS，您需要使用shadow，因为这些子元素位于纸张的shadowDOM下拉菜单中

paper-dropdown-menu {
  width: 300px;
}
paper-dropdown-menu::shadow paper-input{
  width: 300px;
}
paper-dropdown-menu::shadow paper-item{
   width: 300px;
}

这将更改下拉选项卡的宽度，以及单击时实际打开的宽度