Hello,
I have a view with a tab. I need the view to have a search field in my tab and the results underneath. I’m using the collection-repeat approach discussed here. My problem is the container for the results does not take up the remaining space of the view. If I hard-code “height:300px;” on the <div class="list">
element, or its parent element, it works. My code looks like the following:
<ion-tab title="SEARCH">
<ion-content scroll="false">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="search" id="search" />
</label>
<button class="button button-small button-stable" ng-click="search_Click()">search</button>
</div>
</div>
<ion-scroll>
<div>
<div class="list">
<a class="item" style="left:0; right:0"
collection-repeat="result in results"
collection-item-width="'100%'" collection-item-height="getItemHeight(result, $index)"
ng-style="{height: getItemHeight(result, $index)}">
<h2>{{result.Name}}</h2>
<p>{{result.Highlight}}</p>
</a>
</div>
</div>
</ion-scroll>
</ion-content>
</ion-tab>
How do I make a div fill the remaining space of a tab?