Polymer - content tag inside core-animated-pages doesn't take height

Question

I have a list of elements and i want that each element will have 2 pages/2 views. Each element has a generic content (<content></content>).

The problem is that when i'm using core-animated-pages to wrap my generic content, my list of elements are one over each other. I know that it is because the animated-pages converts my content position to absolute (and i don't want to change that) but why the element content doesn't get its child height in this case?

I took the demo from the polymer site to demonstrate a bit better what i'm trying to accomplish here -

inside the post-card.html i inserted the core-animated-pages so that when i click on each element it will switch 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>

wirlez wirlez · Accepted Answer · 2015-02-24T10:09:18

You could use data-binding on the selected attribute inside the core-animated-pages tag

<core-animated-pages 
    id="p" 
    on-tap="{{togglePage}}" 
    transitions="cross-fade-all"
    selected="{{mySelected}}"
>

<script>
Polymer({
    mySelected: 0, //default value
    togglePage: function(){
        var max = 1;
        if (this.$.p.selected === max) {
            this.mySelected -= 1;
        } else {
            this.mySelected += 1;
        }
    }
})

If that isn't working you could try changing place on the on-tap attribute to the section tag. <section on-tap="{{togglePage}}"></section>

Polymer - content tag inside core-animated-pages doesn't take height

1 Answers