CODEWITHSUNDEEP
polymer
DirkJan
DirkJan

Reputation: 581

Polymer paper tabs not rendering properly

I have just been learning polymer and have been following the tutorial in this website: polymer-project.org

I am at the part where I am to place paper tabs on the core-header-panel. Following the tutorial, I am not able to render the paper tabs completely. But if I remove the core-header-panel and core-toolbar tags, I was able to render them.

Here's the code that doesn't render the tabs:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="bower_components/platform/platform.js" ></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/font-roboto/roboto.html">
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
</head>

<body unresolved touch-action="auto">
    <core-header-panel>
        <core-toolbar>
            <paper-tabs valueattr="name" selected="all" self-end>
                <paper-tab name="all">All</paper-tab>
                <paper-tab name="favorites">FAVORITES</paper-tab>
            </paper-tabs>
        </core-toolbar>
    </core-header-panel>
<script>
    var tabs = document.querySelector('paper-tabs');
    tabs.addEventListener('core-select', function(){
        console.log("Selected: " + tabs.selected);
    });
</script>

</body>

And here's the code that renders the tabs:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="bower_components/platform/platform.js" ></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/font-roboto/roboto.html">
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
</head>

<body unresolved touch-action="auto">

            <paper-tabs valueattr="name" selected="all" self-end>
                <paper-tab name="all">All</paper-tab>
                <paper-tab name="favorites">FAVORITES</paper-tab>
            </paper-tabs>

<script>
    var tabs = document.querySelector('paper-tabs');
    tabs.addEventListener('core-select', function(){
        console.log("Selected: " + tabs.selected);
    });
</script>

</body>
</html>

Upvotes: 3

Views: 1873

Answers (1)

DirkJan
DirkJan

Reputation: 581

Okay, I got it now. I just have to set the height of the core-header-panel to height: 100%; I thought polymer automatically assigned the tag to be on height:100%;

Upvotes: 1

Related Questions