My html looks like this:
I have static ion items and number of items in list do not change. I want to be able to set the size of ion item according to the phone height so that the user does not have to scroll for this small list of items.
I have tried setting scroll="false" in ion content the list is part of but scroll bar still appears.
I thought of using ng-style="{'line-height': '250px'}" but setting it for every item individually would not be a good idea I guess? Is there a better workaround to fix this?
<ion-view >
<ion-nav-title>
{{deployementName}}
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-default" ng-click="opendateModal()">{{startDate}}</button>
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<a class="button button-dark button-clear" ui-sref="Deployment"> <i class="icon ion-ios-home"></i> </a>
</ion-nav-buttons>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="mob-bar-balanced nav-title-slide-ios7" style=" margin-left:-1125px">
</ion-nav-bar>
<ion-content>
<ion-slide-box active-slide="myActiveSlide" show-pager="false" on-slide-changed="slideHasChange($index)">
<ion-slide>
<ion-list>
<ion-item>
<h2 style="color:#006db8;font-size:22px"><img src="img/sales-icon.jpg"> Sales Summary</h2>
</ion-item>
<ion-item>
<h3 style="color:#4b4b4b;font-size:18px">Net Sales</h3><br>
<img src="img/rupe-icon.jpg"><i style="color:#078d00;font-size:22px;"> {{netSale | number}}</i></ion-item>
<ion-item>
<h3 style="color:#4b4b4b;font-size:18px">Gross Sales</h3><br>
<img src="img/rupe-icon.jpg"> <i style="color:#078d00;font-size:22px;"> {{netSale | number}}</i></ion-item>
<ion-item>
<h3 style="color:#4b4b4b;font-size:18px">Discounts</h3><br>
<img src="img/rupe-icon.jpg"><i style="color:#078d00;font-size:22px;"> {{discounts | number}}</i>
</ion-item>
<ion-item>
<h3 style="color:#4b4b4b;font-size:18px">Taxes</h3><br>
<img src="img/rupe-icon.jpg"><i style="color:#078d00;font-size:22px;"> {{taxes | number}}</i>
</ion-item>
<ion-item>
<h3 style="color:#4b4b4b;font-size:18px"> Total Bills</h3><br>
<i style="color:#078d00;font-size:22px;">{{billInfo.length}}</i>
</ion-item>
<ion-item>
<h3 style="color:#4b4b4b;font-size:18px"> Avg Amount Per Bill</h3><br>
<img src="img/rupe-icon.jpg"> <i style="color:#078d00;font-size:22px;">{{netSale/billInfo.length| number:0}}</i>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-item>
<i style="color:#006db8;font-size:16px;">Net Sales</i> <img src="img/rupe-icon-small.png"><i style="color:2d2d2d;font-size:20px"> {{netSale | number}}</i></ion-item>
<div class="row" ng-show="showHideDiv">
<div class="col">
<label class="item item-input item-select">
<div class="input-label">
<strong style="font-size:9px"> Interval</strong>
</div>
<select ng-options="time as time for time in timeInterval" style="font-size:10px" ng-model="interval" ng-change="generateBillReport(interval,'interval')">
<!-- <option ng-repeat="time in timeInterval" ng-selected="time==interval">{{time}} hrs</option> -->
</select>
</label>
</div>
<div class="col">
<label class="item item-input item-select">
<div class="input-label">
<strong style="font-size:9px">Start Time</strong>
</div>
<select ng-model="startTime" style="font-size:10px" ng-options="timeStart as timeStart for timeStart in sTime" ng-change="generateBillReport(startTime,'startTime')">
<!-- <option ng-repeat="timeStart in sTime" ng-selected="timeStart==startTime">{{timeStart}}:00</option> -->
</select>
</label>
</div>
</div>
<highchart id="chart" config="salesChart" class="span10">
</highchart>
<button class="button button-medium button-clear" ng-click="showActionsheet('salesChart')"><i class="icon ion-stats-bars" style="color:#006db8"> Graph Info</i></button>
</ion-slide>
<ion-slide>
<ion-item>
<i style="color:#006db8;font-size:16px;">Net Sales</i> <img src="img/rupe-icon-small.png"><i style="color:2d2d2d;font-size:20px"> {{netSale | number}}</i></ion-item>
<highchart id="chart" config="billChartTabWise" class="span10">
</highchart>
<button class="button button-medium button-clear" ng-click="showActionsheet('billChartTabWise')"><i class="icon ion-stats-bars" style="color:#006db8"> Graph Info</i></button>
</ion-slide>
<ion-slide>
<ion-item>
<i style="color:#006db8;font-size:16px;">Net Sales</i> <img src="img/rupe-icon-small.png"><i style="color:2d2d2d;font-size:20px"> {{netSale | number}}</i></ion-item>
<highchart id="chart" config="itemWiseChart" class="span10"></highchart>
<button class="button button-medium button-clear" ng-click="showActionsheet('itemWiseChart')"><i class="icon ion-stats-bars" style="color:#006db8"> Graph Info</i></button>
</ion-slide>
<ion-slide>
<ion-item>
<i style="color:#006db8;font-size:16px;">Net Sales</i> <img src="img/rupe-icon-small.png"><i style="color:2d2d2d;font-size:20px"> {{netSale | number}}</i></ion-item>
<highchart id="chart" config="billChartAmountWise" class="span10"></highchart>
<button class="button button-medium button-clear" ng-click="showActionsheet('billChartAmountWise')"><i class="icon ion-stats-bars" style="color:#006db8"> Graph Info</i></button>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="right">
<header class="bar bar-header mob-bar-royal">
<h1 class="title" style="color:#ffffff">Menu</h1>
</header>
<ion-content class="has-header sidemenu ">
<ion-list>
<ion-item nav-clear menu-close ng-click="logout()">
<i class="ion-log-out">
<button class="button-clear button-royal" style="color:#fffff;font-size:16px;">Logout</button></i>
</ion-item>
<ion-item nav-clear menu-close href="#">
<i class="ion-help-buoy"></i>
<button class="button-clear button-positive" style="color:#2d2d2d;font-size:16px;">Help</button>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>