Polymer core-header-panel inside another element

1
votes

I am trying to create an "my-app" element that contains core-header-panel. Seems like a pretty common thing people will want to do for a SPA.

My index.html:

<!DOCTYPE html>
<html>
<head>        
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="elements/my-app.html">
</head>
<body fullbleed layout vertical unresolved>
    <my-app></my-app>   
</body>
</html>

with my-app.html:

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/core-header-panel/core-header-panel.html">

<polymer-element name="my-app">
    <template>

        <core-header-panel flex>
            <core-toolbar>
                <div>Hello World!</div>
            </core-toolbar>
        </core-header-panel>  

    </template>
    <script src="my-app.js"></script>
</polymer-element>

but all I seem to get is:

enter image description here

any ideas?

EDIT: I have changed my code to be exactly the same as the first example on the Polymer docs (https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel) except the core-header-panel is within another element rather than directly inside the body.

EDIT2: If you disable postion: relative on the core-header-panel then it looks better: enter image description here

2
javascripthtmlpolymer

2 Answers

2
votes

You need to explicitly set a height for the core-header-panel. You can use layout attributes:

<body fullbleed layout vertical> <core-header-panel flex>

or CSS:

html, body { height: 100%; margin: 0; } core-header-panel { height: 100%; }

This is described in the API docs for core-header-panel:

https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel

Edit: I haven't figured out the right incantation to make the flex layout attributes work in your custom element. However, you should be able to set the height explicitly in my-app.html:

<template> <style> :host, core-header-panel { height: 100%; } </style>

Alternately, you could use:

core-header-panel { height: 100vh; }

The former solution requires you to set an explicit height on the body element that's the parent of my-app. The latter solution does not, it just uses the window height.

0
votes

Core-Header-Panel relies on two divs, Content(which you have) and core-header. You've replaced the core-header with a Core-Toolbar, so the panel isn't able to figure out how to size itself. What you want to do is place the Core-Toolbar inside the Header:

<div class="core-header">
  <core-toolbar>
      <paper-tabs id="tabs" selected="all" self-end>
            <paper-tab name="all">All</paper-tab>
            <paper-tab name="favorites">Favorites</paper-tab>
            </paper-tabs>
  </core-toolbar>
</div>