0
Ich schreibe eine Polymer-Website und vor kurzem entschieden, dass die Architektur meiner Website besser wäre, wenn ich meine Hauptlogik aus index.html und in eine Webkomponente verschoben. Aus irgendeinem Grund wird in der Webkomponente, wenn ich paper-scroll-header-panel verwende, nichts angezeigt. Wenn ich den Import dafür auskommentiere, werden die Dinge wieder angezeigt. Alles hat wie erwartet funktioniert, als alles ursprünglich in index.html war.Polymerpapier-Scroll-Header-Panel zeigt nicht
Ich verstehe nicht, warum es jetzt nicht funktioniert. Irgendwelche Ideen, was ich falsch mache?
neue index.html:
<!doctype html>
<html lang="">
<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>Joyce K. Lee</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="import" href="styles/app-theme.html">
<link rel="import" href="styles/shared-styles.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/app.html">
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<template is="dom-bind">
<joyce-app></joyce-app>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
neue app.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<!-- Paper elements -->
<!-- <link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"> -->
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<!-- Neon elements -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<!-- Firebase -->
<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">
<!-- Routing -->
<link rel="import" href="../bower_components/app-router/app-router.html">
<link rel="import" href="custom-icons.html">
<link rel="import" href="blog.html">
<link rel="import" href="artist.html">
<link rel="import" href="teacher.html">
<link rel="import" href="research.html">
<link rel="import" href="contact.html">
<link rel="import" href="login.html">
<link rel="import" href="simple-overlay.html">
<dom-module id="joyce-app">
<template>
<style>
</style>
<app-router style="display:none;">
<app-route path="/" import="/elements/blog.html"></app-route>
<app-route path="/artist" import="/elements/artist.html"></app-route>
<app-route path="/teacher" import="/elements/teacher.html"></app-route>
<app-route path="/research" import="/elements/research.html"></app-route>
<app-route path="/contact" import="/elements/contact.html"></app-route>
<app-route path="*" import="/elements/blog.html"></app-route>
</app-router>
<!-- Main Area -->
<paper-scroll-header-panel fixed>
<!-- Main Toolbar -->
<paper-toolbar class="medium-tall">
<div class="middle">
<div class="app-name">Joyce K. Lee</div>
<span class="flex"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">{{user.password.username}}</template>
</div>
<!-- Application sub title -->
<div class="bottom-title">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
<paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>
<paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>
<paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>
<paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
</paper-tabs>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable><joyce-blog></joyce-blog></neon-animatable>
<neon-animatable><joyce-artist></joyce-artist></neon-animatable>
<neon-animatable><joyce-teacher></joyce-teacher></neon-animatable>
<neon-animatable><joyce-research></joyce-research></neon-animatable>
<neon-animatable><joyce-contact></joyce-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<joyce-login></joyce-login>
</simple-overlay>
</paper-scroll-header-panel>
</template>
<script>
(function() {
Polymer({
is: 'joyce-app'
});
})();
</script>
</dom-module>
original index.html:
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Joyce K. Lee">
<title>Joyce K. Lee</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#00bcd4">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#00bcd4">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<app-router style="display:none;">
<app-route path="/" import="/elements/joyce-blog.html"></app-route>
<app-route path="/artist" import="/elements/joyce-artist.html"></app-route>
<app-route path="/teacher" import="/elements/joyce-teacher.html"></app-route>
<app-route path="/research" import="/elements/joyce-research.html"></app-route>
<app-route path="/contact" import="/elements/joyce-contact.html"></app-route>
<app-route path="*" import="/elements/joyce-blog.html"></app-route>
</app-router>
<!-- Main Area -->
<paper-scroll-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="medium-tall">
<div class="center horizontal layout fit">
<div class="app-name">Joyce K. Lee</div>
<span class="flex"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">{{user.password.username}}</template>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center layout flex fit">
<div class="bottom-title paper-font-subhead">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
<paper-tab><a href="#/artist"><iron-icon icon="image:brush"></iron-icon></a></paper-tab>
<paper-tab><a href="#/teacher"><iron-icon icon="maps:place"></iron-icon></a></paper-tab>
<paper-tab><a href="#/research"><iron-icon icon="work"></iron-icon></a></paper-tab>
<paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
</paper-tabs>
</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable><joyce-blog></joyce-blog></neon-animatable>
<neon-animatable><joyce-artist></joyce-artist></neon-animatable>
<neon-animatable><joyce-teacher></joyce-teacher></neon-animatable>
<neon-animatable><joyce-research></joyce-research></neon-animatable>
<neon-animatable><joyce-contact></joyce-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<joyce-login></joyce-login>
</simple-overlay>
</paper-scroll-header-panel>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<paper-toast id="caching-complete" duration="6000" text="Caching complete! This app will work offline."></paper-toast>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope.selected = 0;
</script>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
haben Sie in Ihrem CSS eine Größe für das Elternelement "paper-scroll-header-panel" angegeben? –