Polymer 自动调整纸张下拉菜单宽度_Polymer

Polymer 自动调整纸张下拉菜单宽度

polymer

Polymer 自动调整纸张下拉菜单宽度,polymer,Polymer,我有以下几点 <!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"

我有以下几点

<!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>


这是一个很长的文本，我在我的论文下拉列表
HTMLImports.whenReady（函数（）{Polymer（{
是：'主页'，
特性：{
}
});});

选择的文本是“这是一个很长的文本，我在我的论文下拉列表中有”，但它被切断。有没有办法让纸张下拉菜单自动调整宽度

在此处放置要玩的东西：

干杯

要做到这一点，您必须计算给定字体的

纸张列表

中每个字符串的像素宽度，获得最大宽度，并将

纸张下拉菜单的宽度设置为该值
请参阅下面的演示。宽度被限制为容器的宽度，这样它就不会在页面外展开


纸张下拉菜单{
最大宽度：100%；
}
福
酒吧
这是一个非常长的文本，我在我的论文下拉列表中
巴兹
聚合物({
是：'主页'，
就绪：函数（）{
this.$.menu.style.width=this.maxTextWidth（）+'px'；
},
maxTextWidth:函数（）{
var font=‘标准13磅机器人，Arial’；
var widths=this.$.list.items.map（函数（项）{
var text=item.textContent&&item.textContent.trim（）；
返回文本？getTextWidth（文本，字体）：0；
});
返回Math.max.apply（数学，宽度）；
}
});
// http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
函数getTextWidth（文本、字体）{
//如果给定，请使用缓存画布以获得更好的性能
//否则，创建新画布
var canvas=getTextWidth.canvas | |（getTextWidth.canvas=document.createElement（“canvas”）；
var context=canvas.getContext（“2d”）；
context.font=font；
var metrics=context.measureText（text）；
返回度量。宽度；
}
要做到这一点，您必须计算给定字体的纸张列表中每个字符串的像素宽度，获得最大宽度，并将纸张下拉菜单的宽度设置为该值
请参阅下面的演示。宽度被限制为容器的宽度，这样它就不会在页面外展开


纸张下拉菜单{
最大宽度：100%；
}
福
酒吧
这是一个非常长的文本，我在我的论文下拉列表中
巴兹
聚合物({
是：'主页'，
就绪：函数（）{
this.$.menu.style.width=this.maxTextWidth（）+'px'；
},
maxTextWidth:函数（）{
var font=‘标准13磅机器人，Arial’；
var widths=this.$.list.items.map（函数（项）{
var text=item.textContent&&item.textContent.trim（）；
返回文本？getTextWidth（文本，字体）：0；
});
返回Math.max.apply（数学，宽度）；
}
});
// http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
函数getTextWidth（文本、字体）{
//如果给定，请使用缓存画布以获得更好的性能
//否则，创建新画布
var canvas=getTextWidth.canvas | |（getTextWidth.canvas=document.createElement（“canvas”）；
var context=canvas.getContext（“2d”）；
context.font=font；
var metrics=context.measureText（text）；
返回度量。宽度；
}
您的意思是希望下拉列表足够宽，以适应整行而不截断？那将是一个糟糕的UX。呵呵，好的。说到这里，你可能是对的。不过我想试试。这种想法不是说下拉菜单的with不应该根据选择而改变，而是根据最长的字符串来固定，就像它在下拉时显示的纸质列表框一样。您的意思是希望下拉菜单足够宽以适应整行而不截断？那将是一个糟糕的UX。呵呵，好的。说到这里，你可能是对的。不过我想试试。这个想法并不是说下拉菜单的with不应该根据选择而改变，而是根据最长的字符串来固定，就像它在下拉时显示的纸张列表框一样。