My goal is to give each element on my list 2 pages or views, with generic content (<content></content>) for each. However, I'm running into an issue where the elements are overlapping when using core-animated-pages to wrap the generic content. It seems that this is due to the animated-pages converting the content position to absolute, which I don't want to change. But why isn't the element content taking its child height into account in this scenario?
To demonstrate what I'm trying to achieve, I took the demo from the Polymer site and customized it a bit. In the post-card.html file, I added the core-animated-pages so that clicking on each element switches the view to "NEXT PAGE!".
<core-animated-pages id="p" on-tap="{{togglePage}}" transitions="cross-fade-all">
<section>
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h2"></content>
</div>
<core-icon-button
id="favicon"
icon="favorite"
on-tap="{{favoriteTapped}}">
</core-icon-button>
<content></content>
</section>
<section>
<p>NEXT PAGE!</p>
</section>
</core-animated-pages>
</template>
<script>
Polymer ({
publish: {
favorite: {
value: false,
reflect: true
}
},
favoriteTapped: function(event, detail, sender) {
this.favorite = !this.favorite;
this.fire('favorite-tap');
},
togglePage: function () {
var max = 1;
if (this.$.p.selected === max) {
this.$.p.selected -= 1;
} else {
this.$.p.selected += 1;
}
}
});
</script>