Polymer's paper-dropdown-menu shows uncollapse

Question

I'm trying to build a small web app using Polymer, based on the Polymer Starter Kit 1.3, and I've immediately ran into a problem - I'm trying to create an element that contains a drop down menu. I've copy/pasted the example from the documentation but instead of looking like a drop down, it looks like a regular uncollapsed listbox:

This is my element template:

  <template>
    <style>
      :host {
        display: block;
      }

      span {
        @apply(--paper-font-body1);
      }
    </style>
<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox class="dropdown-content" selected="1">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>    
</template>

This is my first time with Polymer (or any "advanced" web site kit - I'm more of an old school HTML and Javascript kind of guy) and I've not been able to find out what I'm doing wrong or even how to debug this.

The app.js in PSK 1.3 seems to reference to a bottomContainer that doesn't actually exist in the main file, and that generated a lot of warnings in the console, but after I commented out any mentions of said container, the console log now looks clean - but the drop down still doesn't render correctly.

Any help will be appreciated.

Answer 1

Found out what the problem was - the paper-drowndown-menu.html element was not loaded by elements.html. I've added it and everything is fine.

The Polymer Starter Kit is kind of bad in that its not working out of the box properly in several different aspects and as the newbie it is geared towards, I often find myself looking down at the abyss and considering whether to jump or not...

Answer 2

you just need to import paper-dropdown-menu.html and paper-item.html

Something like this:

<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">

Please make sure the path to the files are correct based on your project structure.