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

Question

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

1k Views Asked by flagadajones At 11 April 2025 at 03:48

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>

Original Q&A

There are 3 best solutions below

**Majid** · Answer 1

Majid On 28 November 2014 at 19:41

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.

**Tim Cook** · Answer 2

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.

**Justin XL** · Answer 3

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.

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

There are 3 best solutions below

Related Questions in CSS

Related Questions in POLYMER

Related Questions in WEB-COMPONENT

Related Questions in CORE-ELEMENTS

Trending Questions

Popular # Hahtags

Popular Questions