Menu
I'm using the demo provided for iron-list to fetch json data and create the iron-list items. All is working well.
However when creating a dom-module the layout styling for each item is not correct and i suspect @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); are not getting picked up.
If i go directly into iron-flex-layout.html and copy the css for those layouts the items look ok
I had a look at styling documentation for v.1 but i couldn't see anything obvious in 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>
785
I had another look at the styling documentation and the examples in there have <style>...</style> just underneath the <dom-module ... like so
<dom-module id="the-id">
<style>
.
.
</style>
So placing <style>..</style> below <template> when using <dom-module .. don't get loaded in.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With