Search code examples
dartpolymerdart-polymer

core-drawer-panel drawer is transparent

I am trying to learn Polymer.dart and I am stuck at basic usage of core-drawer-panel... When I am using core-drawer-panel like this:

<link rel="import" href="../../packages/polymer/polymer.html">

<link rel="import" href="../../packages/core_elements/core_drawer_panel.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_icons.html">
<link rel="import" href="../../packages/core_elements/core_item.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">

<polymer-element name="main-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <core-drawer-panel>
      <core-header-panel drawer>
        <core-toolbar>
          <div>Application</div>
        </core-toolbar>
        <core-menu>
          <core-item icon="settings">Test</core-item>
        </core-menu>
      </core-header-panel>
      <core-header-panel main>
        <core-toolbar>
          <paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
          <div>Title</div>
        </core-toolbar>
        <div> Main content... </div>
      </core-header-panel>
    </core-drawer-panel>
  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

I get transparent drawer, when the layout switches to narrow and drawer is displayed using button, so for example menu inside drawer area is superimposed over main content area... What am I missing here?

Solution

  • Well I did solve the problem by styling the drawer explicitly by using

    [drawer] {
  background-color: #xxxxxx;
}

    apparently drawer is not inheriting global background color...