Polymer : My core-list is no rendered when is in core-animated-pages element

H

3

8

I have a render problem(no render) of a core-list element when my custom element is in core-animated-pages

here is a jsfiddle when it works( grey list) ==> album-grid outside core-animated-pages http://jsfiddle.net/flagadajones/yq30u78d/

here is a jsfiddle when id doesn't works( no grey list) ==> album-grid inside core-animated-pages http://jsfiddle.net/flagadajones/m87sd0x3/2//

could you help me thanks

Here is my code:

 <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js">
  </script>

  <link href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-list/core-list.html" rel="import" >

  <style>
   html, body {
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
    }
      remote-app{ 
      display: block;
      height: 100%;
      margin: 0 auto;
    }

  </style>
  </head>
  <body fit>
    <remote-app ></remote-app>


<polymer-element name="album-detail" attributes="album" layout vertical>
  <template>
    <style>
      #details {
        width: 740px;
        margin: auto;
        height: 100%;
        box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.6);
        poosition:relative;
      }
      .mycard {
        height: 540px;
        border-radius: 3px;
        text-align: start;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      .card-left {
        width: 200px;
        height: 200px;
        background-color:blue;
      }

      .btn{
        background-color:red;
        height:63px;
      }
      .title{
        background-color:yellow;
        color:black;
      }
      .info{
        height:200px
      }
      .item{
        height:48px;
        color:black;
        background-color:grey;
      }
    </style>
    <section id="details" class="details" >

      <div class="mycard " layout vertical>
        <div layout horizontal>
          <div class="card-left" ></div>
          <div  flex auto-horizontal layout vertical class="info">
            <div layout vertical flex class="title">
              <div flex auto>title</div>
              <div flex  auto>title2</div>
            </div>
            <div layout horizontal >
              <a  flex class="btn">aaa</a>
              <a flex  class="btn">bbb</a>
              <a flex class="btn">ccc</a>
            </div>
          </div>
        </div>
        <core-list id="list3" data="{{album.pistes}}" height="48" flex>
          <template>
            <div layout horizontal  class="item" center>
              <div>{{index}} toto {{model.name}}</div>
            </div>
          </template>
        </core-list>
      </div>
    </section>

  </template>
  <script>
    Polymer({

    });
  </script>
</polymer-element>


<polymer-element name="remote-app" layout vertical>

  <template>
    <style>

      [drawer] {
        background-color: #B99588;
        border-right: 1px solid #ccc;
      }
      [main] {
        background-color: #4F7DC9;
        height:100%;
      }
      :host {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .album-grid {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0 auto;
      }
      #pages {
        display: block;
        height: 100%;
        margin: 0 auto;
      }
       .item{
        height:48px;
        color:black;
        background-color:grey;
      }
    </style>
    <core-drawer-panel>
      <div drawer>
      </div>
      <div main>
        <album-detail album="{{ele}}" flex/>
        <!--core-animated-pages id="pages" selected="0" >
            <album-detail  album="{{ele}}" />
        </core-animated-pages-->
      </div>
    </core-drawer-panel>
  </template>
  <script>
    Polymer({
    ele:{pistes:[{name:"1"},{name:"2"},{name:"3"},{name:"4"}]}
    }
           );
  </script>
</polymer-element>

Heirship answered 19/11, 2014 at 11:4 Comment(0)

U

2

Kevin Schaaf has helped me fix this issue. Please see this thread.

Note that you will first need to get the latest version of Polymer (currently 5.2) from bower. Then go to core-animated-pages.html and find this piece of code -

if (!oldItem) {
    this.applySelection(this.selectedItem, true);
    return;
}

Now add this.async(this.notifyResize); after applySelection -

if (!oldItem) {
    this.applySelection(this.selectedItem, true);
    this.async(this.notifyResize);
    return;
}

That's it! Your code should be working without calling updateSize or any other tricks.

I think after 5.2 this fix will be included into package so you don't need to do this. But for now it's just simple change that you need to make.

Utopianism answered 6/1, 2015 at 1:40 Comment(0)

U

0

I was having the exact same issue with Polymer 0.5.1.

For now I switched core-animated-pages back to core-pages and it renders properly.

Unveiling answered 28/11, 2014 at 19:41 Comment(0)

S

0

This isn't a 'fix' but a work around. I found that putting any text or even a <br/> tag between the core-list element and its template element, causes it to render in core-animated-pages.

Maybe that will help someone troubleshooting the problem as well.

Saleh answered 2/1, 2015 at 10:34 Comment(0)

Recommended topics

Hot tags