Autosize the paper-dropdown-menu width

Question

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

You mean you want the dropdown to widen enough to fit the entire line without truncation? That would be an awful UX. — tony19, May 21 '16 at 21:34
Hehe, ok. Point taken, you are probably right. I would like to try though. The idea would not be that the with of the drop down menu should not change according to the selection, but be fixed according to the longest string, just as the paper-list box that it displays when dropped down. — Franz Thomsen, May 23 '16 at 00:51

tony19 · Accepted Answer · 2019-05-31T00:52:27.867

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

Autosize the paper-dropdown-menu width

1 Answers1

Linked