Geek Answers Handbook

Polymer v1.0.

I am using the demo provided for iron list to get json data and create iron list items. Everything works well.

However, when creating the dom-module the layout style for each element is incorrect, and I suspect that @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); don't get it.

If I go directly to iron-flex-layout.html and iron-flex-layout.html css for these layouts, the elements look fine

I looked at the style documentation for v.1, but I could not see anything obvious there

thanks

code

 <body unresolved> <paper-scroll-header-panel class="fit" condenses keep-condensed-header> <paper-toolbar class="tall"> <paper-icon-button icon="arrow-back"></paper-icon-button> <div class="flex"></div> <paper-icon-button icon="search"></paper-icon-button> <paper-icon-button icon="more-vert"></paper-icon-button> <div class="bottom title">iron-list</div> </paper-toolbar> <my-request></my-request> </paper-scroll-header-panel> <dom-module id="my-request"> <template> <iron-ajax auto id="ajaxPost" url="the-url" handle-as="json" last-response="{{data}}" on-respone="handleResponse"></iron-ajax> <iron-list items="{{data.items}}" as="item"> <style> iron-list { background-color: var(--paper-grey-200, #eee); } .item { @apply(--layout-horizontal); margin: 16px 16px 0 16px; padding: 20px; border-radius: 8px; background-color: white; border: 1px solid #ddd; } .pad { padding: 0 16px; @apply(--layout-flex); @apply(--layout-vertical); } .primary { font-size: 16px; font-weight: bold; } .secondary { font-size: 14px; } .dim { color: gray; position: absolute; right: 70px; bottom: 10px; } .more { position: absolute; bottom: 10; right: 37px; color:#D3D3D3; } </style> <template> <div> <div class="item"> <iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image> <div class="pad"> <div class="primary">{{item.the_title}}</div> <div class="secondary">{{item.info}}</div> <div class="dist secondary dim"><span>{{item.lat}}</span>,<span>{{item.lng}}</span></div> </div> <iron-icon class="more" icon="star"></iron-icon> <iron-icon icon="more-vert"></iron-icon> </div> </div> </template> </iron-list> </template> </dom-module> <script> (function() { Polymer({ is: 'my-request', handleResponse: function() { console.log('handleResponse'); } }); })(); </script> </body>
+5
source share
1 answer

I had another look at the style documentation, and the examples have <style>...</style> right under <dom-module ... so

 <dom-module id="the-id"> <style> . . </style>

Therefore, placing <style>..</style> below <template> when using <dom-module .. does not load.

+1
source

More articles:


All Articles