将"下拉内容"设置为与纸张下拉菜单相同的宽度？
Why*_*ser 10 html javascript polymer-1.0
我有以下代码:
<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？
或者，如果您愿意，这里是代码段
.custom {
width: 190px;
}
.custom2 {
width: 400px;
}<!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>我所做的只是创建了一个自定义类，该类应用于下拉菜单和列表框，使它们的宽度相同。我相信190px是默认值，但是一旦您有了该类，就可以根据需要调整大小。