javascript - Polymer paper-header-panel not showing any content in paper-drawer-panel -
when run code can see standard test paper-header-panel. within paper-drawer-panel seems hidden.
if set initial paper-header-panel(class=blue) 1000px, rest of content show.
is there need set initial paper-header-panel change it's height automatically based on content?
thanks
<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html"> <link rel="import" href="/apps/polymer-chat/css/app-theme.html"> <dom-module id="main-component"> <link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css"> <template> <paper-header-panel class="blue"> <div class="paper-header">standard test</div> <paper-drawer-panel id="maindrawerpanel" class="main-drawer-panel" responsive-width="600px" drawer-width="[[_computelistwidth(_ismobile)]]" drawer-toggle-attribute="list-toggle" narrow="{{_ismobile}}" > <paper-header-panel class="list-panel" drawer> <paper-menu class="list" on-iron-activate="_listtap"> <paper-item>1</paper-item> <paper-item>2</paper-item> <paper-item>3</paper-item> <paper-item>4</paper-item> </paper-menu> </paper-header-panel> <paper-header-panel class="content-panel" main> <paper-toolbar responsive-width="600px"> <paper-icon-button icon="menu" list-toggle></paper-icon-button> <span class="flex">chat person name here</span> </paper-toolbar> <div class="content">main area</div> </paper-header-panel> </paper-drawer-panel> </paper-header-panel> </template> <script> polymer({ is: 'main-component', _computelistwidth: function(ismobile) { // when in mobile screen size, make list 100% width cover whole screen return ismobile ? '100%' : '25%'; }, _listtap: function() { this.$.maindrawerpanel.closedrawer(); } }); </script> </dom-module>:host { display:block; } .paper-header { height: 60px; font-size: 20px; color: var(--text-primary-color); line-height: 60px; padding: 0 30px; } .blue .paper-header { background-color: var(--default-primary-color); } .list-panel { background-color: #fafafa; --paper-header-panel-standard-container: { border-right: 1px solid #ccc; }; } paper-toolbar { background-color: #42a5f5; } .list { background-color: #ffffff; } .list paper-item { height: 80px; border-bottom: 1px solid #dedede; background-color: #fafafa; color: #000000; } .main-drawer-panel:not([narrow]) [list-toggle] { display: none; } .content { height: 3000px; }<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <title>polymer demo</title> <script src="js/bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="/apps/polymer-demo/components/main-component.html"> <style is="custom-style"> body { font-family: 'roboto', sans-serif; } </style> </head> <body class="fullbleed layout vertical"> <main-component></main-component> </body> </html>
nevermind. figured out problem.
the issue being caused html doctype
after removing it. working correctly.
Comments
Post a Comment