自动调整下拉菜单的宽度 [英] Autosize the paper-dropdown-menu width
问题描述
我有以下内容
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
</head>
<body unresolved>
<dom-module id='base-page'>
<template>
<paper-dropdown-menu>
<paper-listbox class='dropdown-content' selected='0'>
<paper-item>This is a very long text that I have in my paper drop down</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>
选定的文本为这是我在下拉菜单中有的很长的文本"，但该文本被截断了.有没有一种方法可以使我使用纸张下拉菜单来自动调整宽度?
The selected text is "This is a very long text that I have in my paper drop Down", but it gets cut off. Is there a way that I can get the paper-dropdown-menu to autosize the Width?
在此处放置一些要玩的东西: http://jsbin.com/dejukufaqe/edit?html ，输出
Placed something here to play with: http://jsbin.com/dejukufaqe/edit?html,output
欢呼
推荐答案
要实现此目的，您必须计算给定字体paper-list中每个字符串的像素宽度，获取最大宽度，并将paper-dropdown-menu的宽度设置为该值.
To accomplish this, you'd have to calculate the pixel width of each string in the paper-list in a given font, get the maximum of the widths, and set the paper-dropdown-menu's width to that value.
请参见下面的演示.宽度被限制为容器的宽度，这样它就不会在页面上展开.
See the demo below. The width is limited to the container's width so that it doesn't expand off the page.
<head>
<meta charset="utf-8">
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
<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>
<base-page></base-page>
<dom-module id='base-page'>
<style>
paper-dropdown-menu {
max-width: 100%;
}
</style>
<template>
<paper-dropdown-menu id="menu">
<paper-listbox id="list" class='dropdown-content' selected='0'>
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>This is a very very long long text that I have in my paper drop down</paper-item>
<paper-item>Baz</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: 'base-page',
ready: function() {
this.$.menu.style.width = this.maxTextWidth() + 'px';
},
maxTextWidth: function() {
var font = 'normal 13pt Roboto,Arial';
var widths = this.$.list.items.map(function(item) {
var text = item.textContent && item.textContent.trim();
return text ? getTextWidth(text, font) : 0;
});
return Math.max.apply(Math, widths);
}
});
// http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
function getTextWidth(text, font) {
// if given, use cached canvas for better performance
// else, create new canvas
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
</script>
</dom-module>
</body>
这篇关于自动调整下拉菜单的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
