Polymer custom element not obeying parent html element

Question

I am using Polymer 1.0 - My page is contained within a paper-scroll-header-panel and I am trying to turn part of the main toolbar into a custom element (my-header):

<paper-scroll-header-panel condenses keep-condensed-header>

    <!-- Main Toolbar -->
    <paper-toolbar class="tall layout horizontal" id="title-toolbar">
            <my-header id="myHeaderElement"></my-header>
    </paper-toolbar>

my-header custom element looks like this:

<dom-module id="my-header">
<style>

</style>
<template>
    <div class="bottom center horizontal layout" id="testing">
        <paper-button>Title</paper-button>
        <div class="flex"></div>
        <paper-button on-click="openLang">lang</paper-button>
    </div>
</template>
<script>
    Polymer({
        is: "my-header",
        behaviors: [
            Polymer.IronFitBehavior,
            Polymer.IronResizableBehavior
        ],
        ready: function() {
            this.fit();
        }
    });
</script>
</dom-module>

The problem is that layout attributes bottom center horizontal layout aren't being applied properly since its not obeying the parent <paper-toolbar> element. It renders like this:

but the it should render with the text on the bottom of the orange box and the Title on the left, long flex box in the middle, and LANG on the far right. If I pull the HTML out of the custom element and stick it directly into the index.html file it works just fine.

As you can see I added some behaviors to the element and have played around with calling them in the ready function but to no avail..

I also tried pulling the whole <paper-toolbar> element into the custom element but that just created even more problems with <paper-scroll-header-panel>'s functionality.

How can I get this custom element to stay inside its parent and obey the formatting classes/attributes?

Justin XL Justin XL · Accepted Answer · 2015-08-05T23:03:43

Try applying class bottom on your element in light dom.

<paper-toolbar class="tall layout horizontal" id="title-toolbar">
        <my-header class="bottom" id="myHeaderElement"></my-header>
</paper-toolbar>

Polymer custom element not obeying parent html element

1 Answers