自動サイズ紙のドロップダウン・メニューの幅

私は自動サイズ紙のドロップダウン・メニューの幅

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

を以下している選択したテキストは、「これは私が私の論文ドロップダウンを持っている非常に長いテキストである」ですが、それを取得断つ。幅を自動サイズ調整するための用紙ドロップダウンメニューが表示される方法はありますか？

と遊ぶのがここ

置か何か：http://jsbin.com/dejukufaqe/edit?html,output

乾杯

出典

2016-05-20 Franz Thomsen

あなたはドロップダウンが切り捨てずに全体のラインにフィットするのに十分広げたいわけ？それは恐ろしいUXだろう。 – tony19

Hehe、ok。ポイントは、あなたはおそらく正しいです。私はやってみたいです。この考え方は、ドロップダウンメニューの選択肢が選択に応じて変わるべきではなく、ドロップダウン時に表示されるペーパーリストボックスと同様に、最も長い文字列に従って固定されるべきではない。 –

これを実現するために、あなたが与えられたフォントでpaper-listの各文字列のピクセル幅を計算する必要があるだろう、の最大値を取得しますその幅にpaper-dropdown-menuの幅を設定します。

下記のデモをご覧ください。幅は、ページ外に広がらないように、コンテナの幅に制限されています。

<head> 
 
    <meta charset="utf-8"> 
 
    <base href="https://polygit.org/polymer+1.4.0/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> 
 
    <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>

^jsbin

出典

2016-05-23 02:46:55 tony19

うわー...お返事ありがとう:-) –

自動サイズ紙のドロップダウン・メニューの幅

答えて

関連する問題