CODEWITHSUNDEEP
polymer
Sea Bey
Sea Bey

Reputation: 3

Paper Scroll Header Panel not working with Custom Element

I'm newbie at Polymer.

Problem: I want use paper-scroll-header-panel in my custom element. Trying, but background image does not appear. Update: Problem with images on Imgur

Files: index.html, salon-header.html

index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="salon-header.html">
<head>
<body>
    <salon-header></salon-header>
<body>
<html>

salon-header.html:

<dom-module id="salon-header">
    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
    <link rel="import" href="bower_components/paper-scroll-header-panel/demo/sample-content.html">
    <template>
    <style>
        paper-scroll-header-panel {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: var(--paper-grey-200, #eee);
            --paper-scroll-header-panel-full-header: {
                background-image: url(bg3.jpg);
            }
            ;
            --paper-scroll-header-panel-condensed-header: {
                background-color: var(--google-yellow-500, #f4b400);
            }
            ;
        }
        paper-toolbar {
            background-color: transparent;
        }

        paper-toolbar .title {
            font-size: 40px;
            margin-left: 60px;
        }
        .content {
            padding: 8px;
        }
    </style>
    <paper-scroll-header-panel condenses>
        <paper-toolbar class="tall">
            <paper-icon-button icon="arrow-back"></paper-icon-button>
                <div class="flex"></div>
                <paper-icon-button icon="search"></paper-icon-button>
                <paper-icon-button icon="more-vert"></paper-icon-button>
                <div class="bottom indent title">Title</div>
            </paper-toolbar>
            <div class="content">
                <h3>Resize window to toggle between fixed header and scrolled header</h3>
                <sample-content size="100"></sample-content>
            </div>
        </paper-scroll-header-panel>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'salon-header'
    });
</script>

This works in a single file. But i want seperate files to clean index.

I tried:

Finally: In this project structure (In question), header not have background image, only have background color #3f51b5.
When i try other ways, sometimes header doesnt appear, sometimes header have transparent background (Inherited from body: #eee)

I hope, i can explain myself.

By the way, you can share with me your Polymer experiences and you can suggest me Polymer tips. Thanks.

Upvotes: 0

Views: 1345

Answers (1)

Aravind
Aravind

Reputation: 423

Put the <style> tags outside the <template> element. Please see the relevant documentation here. Same with adding external stylesheet. You should add it before the <template> tag and inside the <dom-module>

Upvotes: 0

Related Questions