Closed nomego closed 8 years ago
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
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?
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? :(
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:
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?
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.
Also to me this looks pretty similar to #152, so I'll close this one and we can continue over there ;)
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
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)