Polymer paper-dropdown-menu expansion height limited by core-collapse?

Question

I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)

Unexpanded (note the top alignment):

Unexpanded (note top alignment):

Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):

Expanded (there should be 5 options and note the altered top alignment):

Proper operation (when dropdown height is same or less than containing collapsible element height): Proper operation when dropdown height is smaller (within containing element size)

I'm seeing the same thing with 0.4.2, which includes the allowOverflow attribute in core-collapse. Setting the fixedSize attribute on core-collapse and bumping the height up to a large number works as long as the dropdowns fit within the screen size: the drop-downs are shown with requested height and with scroll-bars where necessary, but can't switch focus to the scroll-bars to actually scroll. — user2778525
I tried a roll-your-own alternative with core-dropdown but it had the same issue in addition to being harder to position. — user2778525
The latest github versions of paper-dropdown-menu and core-dropdown include a new layered attribute which places it in a separate layer which shows above the collapse container without the need for fixedSize. However, still can't get focus on scroll-bar, and weirdly the base paper-dropdown-menu now shows all results all the time...possibly because encapsulation isn't fully there yet. On both counts could also be because I've pulled the various file versions together incorrectly. plnkr.co/edit/JswiH3XDOGBmZJr6tRyW?p=preview — user2778525
Yes, I have confirmed that utilizing github's master branch versions of the components involved does in fact resolve the issue, but not without a little code rework as well. It seems you must follow the code examples shown in the master branch demos pretty closely (see layered examples). — sinjins

user4178807 user4178807 · Accepted Answer · 2014-10-24T18:19:50

In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.

<core-collapse allowOverflow> <div class="content"> <paper-dropdown-menu> ... </paper-dropdown-menu> </div> </core-collapse>

Polymer paper-dropdown-menu expansion height limited by core-collapse?

2 Answers