Not possible to extend width properly

[nomego]

Description

Not possible to adjust width of element since local dom paper-menu-button doesn't adjust as well.

Expected outcome

paper-menu-button adjusts as well.

Actual outcome

Element takes up proper width but paper-menu-button stays the same

Live Demo

https://jsbin.com/mugelihebi/edit?html,output

Steps to reproduce

1. Extend the width of paper-dropdown-menu
2. Open the page in a web browser.

   Proposed solution

Add width: 100%; to CSS of paper-menu-button (https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu-shared-styles.html#L64)

[notwaldorf]

I think you have that backwards. You want the outer div to have horizontal layout, and the paper-dropdown-menu to be flex:

<div style="width: 1000px" class="horizontal layout">
    <paper-dropdown-menu class="flex" label="A pretty long label that doesn't fit"></paper-dropdown-menu>
</div>

Once you do that, the element fits the width, as expected: https://jsbin.com/luwiquy/edit?html,output

[nomego]

Well, yeah that actually works.

But it requires me to add a wrapping div with horizontal layout for that single element (in my real use cases).

Is there any reason you don't want to add that CSS rule to paper-menu-button to make my approach work as well?

[notwaldorf]

Oh, sorry, I thought that was a requirement. If you just add width:100% to the element it works as well:

<paper-dropdown-menu style="width:100%" label="A pretty long label that doesn't fit"></paper-dropdown-menu>

It basically has a default, fixed size (like the native input and select elements do), and you can change it as you want. Am I misunderstanding what you're trying to do? :(

[nomego]

Well you're not completely misunderstanding what I'm trying to do but the different ways to get there :)

I have provided a more thorough jsbin: https://jsbin.com/jipogofiwi/edit?html,output

Walkthrough:

1. Regular paper-dropdown-menu for reference
2. Regular paper-dropdown-menu with proposed fix for reference that it doesn't break
3. My claimed bug and not-currently-working approach
4. My proposed fix (thanks to mixins)
5. My proposed fix inside a paper-dialog-style element (that adds padding to child elements)
6. Your proposed width 100% solution
7. Your proposed width 100% solution inside a paper-dialog-style element (that adds padding to child elements), breaking the width limit
8. Demonstration that vertical layout breaks
9. Your wrapper solution

So width 100% (#6) doesn't work inside things like paper-dialog (#7) so it's not a good all-round solution. Apart from that, a wrapper div that sets layout works, but requires wrappers everywhere you want the element to take up all available width. Finally, my proposed change enables the element to flex out without a wrapper, with a simple change that I can't really see how it would cause issues elsewhere. Looking at the template, the paper-menu-button should take up all available space within paper-dropdown-menu either way?

[ktiedt]

This seems pretty similar to #152 but since this one has had a bit of traction I will comment here... I am having similar issues, I simply want a paper-dropdown-menu that allows for the width to adjust and display its value... so a menu with the options of Overview and Something really long doesnt have a button that looks like | Overview v | instead it looks like | Overview v | and similarly | Something really long v | or even due to max-width | Something real... v | --- Currently I cannot find any way to control the layout to achieve this flexibility.

[valdrinkoshi]

Also to me this looks pretty similar to #152, so I'll close this one and we can continue over there ;)