polymer 1.0 - paper-dropdown-menu options are horizontally stacked instead of vertically stacked -


in polymer labs todo-list https://github.com/polymerlabs/todo-list.git, added paper-dropdown menu in index.html

<body unresolved class="fullbleed layout vertical"> <span id="browser-sync-binding"></span> <template is="dom-bind" id="app">  <todo-auth id="auth"            user="{{user}}"            location="[[firebaseurl]]"            user="{{user}}"> </todo-auth>  <todo-data location="[[firebaseurl]]"            todos="{{todos}}"            user="{{user}}"> </todo-data>  <todo-view class="flex"            route="{{route}}"            todos="{{todos}}"            on-sign-out="signout"> </todo-view>  <paper-dropdown-menu label="time">   <paper-listbox class="dropdown-content" selected="0">     <paper-item>all dday</paper-item>     <paper-item>am</paper-item>     <paper-item>pm</paper-item>   </paper-listbox> </paper-dropdown-menu>  <paper-toast id="caching-complete"              duration="6000"              text="caching complete! app work offline."> </paper-toast>

however, instead of options being vertically stacked, being stacked horizontally soenter image description here

in source code paper-dropdown-menu demo, not see them doing special have vertically stacked. may know overriding default styling in todo-list app , how vertically stacked? thanks.

you have import paper-dropdown-menu, paper-listbox before using it. make sure paper-dropdown-menu, paper-listbox & paper-item imported this

here working demo of paper-dropdown-menu alone 

<html>    <head>      <title>template me</title>        <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>        <base href="http://polygit.org/components/">    <link rel="import" href="polymer/polymer.html">    <link rel="import" href="paper-listbox/paper-listbox.html">    <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">  <link rel="import" href="paper-item/paper-item.html">      </head>  <body class="fullbleed">    <custom-listbox id="customlistboxid"></custom-listbox>    <dom-module is="custom-listbox">  <template>  <paper-dropdown-menu label="time">    <paper-listbox class="dropdown-content" selected="0">      <paper-item>all dday</paper-item>      <paper-item>am</paper-item>      <paper-item>pm</paper-item>    </paper-listbox>  </paper-dropdown-menu>    </template>    <script>  polymer({    is: 'custom-listbox'  });  </script>    </dom-module>    </body>  </html>


Comments

Post a Comment