CODEWITHSUNDEEP
polymer
Franz Thomsen
Franz Thomsen

Reputation: 484

Autosize the paper-dropdown-menu width

I have the following

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

Placed something here to play with: http://jsbin.com/dejukufaqe/edit?html,output

Cheers

Upvotes: 0

Views: 1397

Answers (1)

tony19
tony19

Reputation: 138286

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>

jsbin

Upvotes: 2

Related Questions