Geek Answers Handbook

Polymer: my main list is not displayed when the core-animated-pages element is located

I have a problem of rendering (without rendering) a core-list element when my user element is in kernel-animated pages

here is jsfiddle when it works (gray list) ==> landscape grid outside main animated pages http://jsfiddle.net/flagadajones/yq30u78d/

here jsfiddle when id is not working (no gray list) ==> album-grid inside the main animated pages http://jsfiddle.net/flagadajones/m87sd0x3/2//

could you help me?

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>
+8
css polymer web-component core-elements
source share
3 answers

Kevin Schaaf helped me fix this problem. See this thread .

Please note that you first need to get the latest Polymer (currently 5.2 ) from the gazebo. 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; }

What is it! Your code should work without calling updateSize or any other tricks.

I think that after 5.2 this fix will be included in the package, so you do not need to do this. But for now, this is just a simple change that you need to make.

+2
source share

I had the same problem with Polymer 0.5.1 .

Now I switched core-animated-pages back to core-pages and it will display correctly.

0
source share

This is not a “fix”, but a job. I found that putting any text or even a symbol tag between the main list item and its template element makes it display on the main animated pages.

Perhaps this will help someone solve the problem.

0
source share

More articles:


All Articles