Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dropdown with full width</title>
    <base href="//polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="iron-icons/iron-icons.html">
    <link rel="import" href="paper-input/paper-input.html">
    <link rel="import" href="paper-item/paper-item.html">
    <link rel="import" href="paper-listbox/paper-listbox.html">
    <link rel="import" href="paper-menu-button/paper-menu-button.html">
    <link rel="import" href="polymer/lib/elements/custom-style.html">
    <link rel="import" href="shadycss/apply-shim.html">
  </head>
<body>
<custom-style>
    <style>
        paper-menu-button {
            display: block;
            --paper-menu-button-dropdown: {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                display: block;
                width:100%;
            };
            --paper-menu-button-content: {
                max-width: none !important;
                max-height: none !important;
                display: block;
            };
        }
    </style>
</custom-style>
<paper-menu-button no-overlap>
    <paper-input icon="menu" slot="dropdown-trigger">
        <iron-icon icon="arrow-drop-down" slot="suffix"></iron-icon>
    </paper-input>
    <paper-listbox slot="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
    </paper-listbox>
</paper-menu-button>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Saheropro
0viewers