Polymer iron-list under polymer-tab not scrollable - polymer

Question

We currently have an paper tab view with 3 tabs, each tab loads its own iron page. Inside the iron page we pull a list of elements using an API. The iron list successfully loads the api results but we can only view the first few elements.
The other elements are hidden as we are unable to scroll. How do we make the list scrollable? as the list view grows in size. The list is dynamically loaded when a particular tab is selected.
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title"><div class="logo"></div></span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="/" >
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="todays-sminq" href="/todays-sminq" on-click="onDataRouteClick">
<iron-icon icon="info"></iron-icon>
<span>Today's sminq</span>
</a>
<a data-route="upcoming-sminq" href="/upcoming-sminq" on-click="onDataRouteClick">
<iron-icon icon="mail"></iron-icon>
<span>Upcoming sminq</span>
</a>
<a on-click="logOut">
<iron-icon icon="user"></iron-icon>
<span>Log Out</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-header-panel main condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="small">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Sminq</div>
</div>
<!-- Application sub title -->
<!--<div class="bottom bottom-container center horizontal layout">-->
<!--<div class="bottom-title paper-font-subhead">waiting is now fun</div>-->
<!--</div>-->
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" >
<live-sminq ></live-sminq>
<!--paper-material elevation="1">
</paper-material>
<paper-material elevation="1">
</paper-material>
<paper-material elevation="1" class="paper-font-body2">
</paper-material-->
</section>
<section data-route="todays-sminq" id="sectiontodays" >
<todays-sminq></todays-sminq>
<!--paper-material elevation="1">
</paper-material-->
</section>
<section data-route="sminq-info">
<sminq-single
token_id ="{{params.id}}" token_number="{{params.no}}" user_name="{{params.name}}"
status_type="{{params.status}}"
user_mobile ="{{params.mobile}}"
queue_id ="{{params.queueId}}"
sminq_type="{{params.sminqType}}"
joinDate="{{params.date}}"
>
</sminq-single>
</section>
<section data-route="live-tokens"class="layout vertical fit">
<live-tokens
queue_id="{{params.id}}" user_name="{{params.name}}">
</live-tokens>
</section>
<section data-route="upcoming-sminq">
<upcoming-sminq>
</upcoming-sminq>
</section>
<section data-route="not-found">
<paper-material elevation="1">
<h2 class="page-title">Page Not Found</h2>
<p></p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-header-panel>
</paper-drawer-panel>
This is our main index.html we have created separate module which loads the tabs and the list view
The code for this module is attached below
<iron-ajax
id="list"
headers='{"Authorization": "xxxx","X-Vertical-Type": "xxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="handleErr"
debounce-duration="300"
last-response="{{ liveQueues }}"
on-response="ajaxResponse">
</iron-ajax>
<!--<template auto is="dom-if" if="{{loading}}"style="width:100%;">-->
<!--<paper-progress value="10" indeterminate="true" ></paper-progress>-->
<!--</template>-->
<div></div>
<span style="display:none;">[[selected]]</span>
<paper-spinner id="spinner" alt="Loading tokens numbers" ></paper-spinner>
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>
<iron-ajax
id="tokens"
headers='{"Authorization": "xxx","X-Vertical-Type": "xxxx" }'
content-type="application/json"
url=""
handle-as="json"
method="GET"
on-error="tokenError"
debounce-duration="300"
last-response="{{ queueTokens }}"
on-response="tokenResponse">
</iron-ajax>
<template is="dom-if" if="{{isQueueId}}">
<sminq-add queue_id="{{queueId}}"></sminq-add>
</template>

Answer 1

You can implement IronResizableBehavior to resize your list when you switch tabs (note: it should work by default though):
iron-list lays out the items when it receives a notification via the resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('resize');