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

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more