Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-menu-button{
        --paper-menu-button-dropdown:{
          max-width: 100%;
          right:70vw;
        };
      }
      paper-item{
        --paper-item:{
          white-space: nowrap;
          width: 100%;
        };
      }
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button>
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers