CODEWITHSUNDEEP
androidangularjsionic-framework
Simran Kaur
Simran Kaur

Reputation: 1101

Changing height of ion item to fit them in screen without scroll

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.

A link [here on stackoverflow][1] suggests 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 view-title="{{deployementName}}">

<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-chevron-left icon-accessory"></i> </a>
</ion-nav-buttons>

<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced nav-title-slide-ios7">
</ion-nav-bar> 
<ion-content has-bouncing="false" scroll="false">
<ion-list>
<ion-item>
<h2>SaleSummary-Total</h2>
</ion-item>
<ion-item>
<h3>NetSale:</h3><br>
Rs.{{netAmount | number}}</ion-item>
<ion-item>
<h3>Gross Sale:</h3><br>
Rs.{{netAmount | number}}</ion-item>
<ion-item>
<h3>Discount:</h3><br>
Rs.{{discount | number}}
</ion-item>
<ion-item>
<h3> Total Bills:</h3><br>
{{billInfo.length}}
</ion-item>
<ion-item>
<h3> Avg Bills Per Sale:</h3><br>
Rs {{netAmount/billInfo.length| number:0}}
</ion-item>

</div>
    </div>
</ion-list>



<ion-slide-box  active-slide="myActiveSlide" show-pager="false"  on-slide-changed="slideHasChange($index)">
<ion-slide disable-scroll="true">
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="right">
<header class="bar bar-header bar-royal">
  <h1 class="title">Menu</h1>
</header>
<ion-content class="has-header sidemenu">
<ion-list>
<ion-item nav-clear menu-close ng-click="logout()">
<i class="ion-person">
<button class="button-clear button-royal">Logout</button></i>
</ion-item>
<ion-item nav-clear menu-close href="#">
<i class="ion-person"></i>
<button class="button-clear button-positive">Help</button>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

</ion-view>-image

Upvotes: 1

Views: 4642

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

Firs of all you need to define two css classes to make total content size 100% of screen under header and for equal size of each item :

.content-with-full-height{
  height: 100%;
}

.equal-sized-item{
  height: *set value in percentage for each item, i.e for 6 items will be 100/6 = 16.7%*
}

Add content-with-full-height class to <ion-content> and <ion-list> so that both get 100% length of page. And add equal-sized-item class to each item.

Upvotes: 1

Related Questions