Match Width of paper-listbox to parent paper-dropdown-menu

[sethpkendall]

Description

I notice that the dropdown menu that appears is scaling to the width of the largest selection option. I am hoping to find a way to make it match the parent paper-dropdown-menu component (That was clicked upon) for better continuity. Having trouble styling it to be like that because the component programmatically abstracts these two components by generating several other container divs. The max-width is ultimately stipulated by the "dropdown-content" div.

Expected outcome

Dropdown menu matches pre-clicked width.

Actual outcome

Dropdown menu is just wide enough to accommodate largest select option.

[iSuslov]

So what is the status of this issue?

[evancaldwell]

Anybody found a good solution to this?

[pcornelissen]

This is bugging me for a long time :-(

[FarbodGhasemi]

I've encountered the same issue while trying to use the paper-dropdown-menu, and after some Googling, I came across this solution provided by Ivan Solskiy in here:

https://stackoverflow.com/questions/33532972/make-dropdown-content-same-width-as-paper-dropdown-menu

1- create a new component and copy/paste the code from '@polymer/paper-dropdown-menu/paper-dropdown-menu.js' and change the is property to the tag-name you want to use in your HTML. then change the path to the 2 imports like bellow:

// import './paper-dropdown-menu-icons.js';
// import './paper-dropdown-menu-shared-styles.js';
// change the lines above with the bellow
import '@polymer/paper-dropdown-menu/paper-dropdown-menu-icons.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu-shared-styles.js';

2- import 'iron-resizable-behavior' at the top of your component like so:

import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

3- add IronResizableBehavior to the component behaviors:

...
behaviors: [
    IronButtonState,
    IronControlState,
    PaperRippleBehavior,
    IronFormElementBehavior,
    IronValidatableBehavior,
    IronResizableBehavior // add it here like this
  ],
...

4- add the ready() method and paste the code bellow inside it:

ready() {
    var ironDropdown = this.$.menuButton.root.querySelector('iron-dropdown');
    this.addEventListener('iron-resize', (e) => {
      ironDropdown.style.width = this.root.host.offsetWidth+'px';
    });
},

that's it. just replace the <paper-dropdown-menu></paper-dropdown-menu> with the tag-name you set the is property to and you're done.

this is not a permanent fix and you won't get the updates on the paper-dropdown-menu, but it's a temp fix for this issue.