CODEWITHSUNDEEP
htmlpolymerweb-component
Peter Fortuin
Peter Fortuin

Reputation: 5228

core-header-panel not visible?

I made a simple example to show a core-header-panel (Polymer web-component) in a webpage. But I don't see anything in the browser and there is also no error in de console (Chrome).

Can somebody tell me what I do wrong? I think I should at least see the text inside the core-header-panel.

The code:

<!doctype html>
<html>

<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<script src="bower_components/platform/platform.js"></script>

<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
</head>

<body unresolved touch-action="auto" fullbleed vertical layout>

<core-header-panel fit>
<div class="core-header">Welcome</div>
<div class="content">Bla bla bla</div>
</core-header-panel>
</body>

</html>

Upvotes: 2

Views: 632

Answers (2)

user2333229
user2333229

Reputation: 1

Are you sure your platform.js import is correctly mapped?

I copied your code and I see your two lines but do not see the polymer elements. I'm guessing your platform.js is incorrect.

Upvotes: 0

robdodson
robdodson

Reputation: 6786

By default core-header-panel doesn't have any explicit height so usually you need to tell it to fill its parent. You've done this by using the fit attribute on the header panel and fullbleed on body (so body is 100% height).

I just tossed your code into jsbin and I see the content of the header panel showing up. http://jsbin.com/letat/2/edit

Are you on Chrome or perhaps a different browser?

Upvotes: 4

Related Questions