问题
How do I position
<paper-menu>element relative to<paper-menu-button>(or<paper-button>) that controls it and expand the menu to the left upon dropdown in order to prevent contents from going off screen? (Please provide a working JSFiddle or JSBin example.)
例如，in this JSBin我如何获得 <paper-menu>索引其相对于 <paper-menu-button> 的位置哪个控制它？ (或者，<paper-button> 也足够了。)
代码
http://jsbin.com/xaladokimu/1/edit?html,输出<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
paper-menu-button{
--paper-menu-button-dropdown:{
max-width: 100%;
right:70vw;
};
}
paper-item{
--paper-item:{
white-space: nowrap;
width: 100%;
};
}
</style>
<paper-header-panel class="flex">
<paper-toolbar>
<span class="flex"></span>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>This is a long label for the paper menu and button to show</paper-item>
<paper-item>This is another long label for the paper menu and button</paper-item>
<paper-item>This is still yet another long label for the paper menu</paper-item>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="fit">Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>
最佳答案
删除 right:70vw; 并将 horizontal-align="right" 添加到 paper-menu-button。
查看此JSBin .
关于css - polymer 1.x : How to position paper menu，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33162667/