Actually i believe the two answers by @aditya shrivastava and @jarod moser are not working if you want it the "pure" polymer style.
Here my reasoning:
- you use CSS that's not getting shimmed by Polymer
- Styles are bleeding through the DOM Tree, which is not intended by Polymer
So my solution here:
- set the width of input as proposed in the other two answers
- set the with of dropdown with the help of the CSS Mixin:
.custom2 {
--paper-dropdown-menu-button: {
left: 0;
width: 100%;
};
}
The Mixin gets applied to the dropdown box - an iron-dropdown actually - when the CSS is getting rewritten. See the documentation at: https://www.polymer-project.org/1.0/docs/devguide/styling#custom-css-mixins
Then your code should follow this basic setup:
<dom-module id="some-kind-of-element">
<style>
#mydropdown {
--paper-dropdown-menu-button: {
left: 0;
width: 100%;
};
}
</style>
<template>
<paper-dropdown-menu id="mydropdown" label="City?">
<paper-listbox class="dropdown-content">
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
I'm not 100% percent sure about the selector now, but you can see in the web inspector how the styles are added to the elements inside the paper-dropdown-menu element. See the element documentation at polymer: https://elements.polymer-project.org/elements/paper-dropdown-menu to find guidance which CSS Mixins are avaliable to you and play around with them, until you nail it. Maybe you also have to overrule the default settings with the use of !important CSS attribute modifier.
Custom CSS is still quite annoying in Polymer...
