i have a UI that shows the details of an item using ng-repeat. here is the code in my html file:
<form>
<div class="row" ng-repeat="(key, value) in inventoryLevel | groupBy:'itemCode'">
<div class="col">
<item class="item item-{{colorTheme}} row">
<item class="col">Category: {{key}} </item>
</item>
<!-- Header Row -->
<item class="col">
<item class="item row">
<item class="col col-15">Item Name </item>
<item class="col col-15">Brand </item>
<item class="col col-5">Size </item>
<item class="col col-15">Quantity </item>
<item class="col col-15">Threshold</item>
<item class="col col-10" align="right"></item>
</item>
</item>
<div ng-repeat="item in value" class="col">
<div class="item row">
<div class="col col-15">{{item.itemName}} </div>
<div class="col col-15">{{item.brand}} </div>
<div class="col col-5">{{item.size}} </div>
<div class="col col-15" align="right">
<input type="number" ng-model="item.quantity" step="1" max="99999999" ng-change='fieldchanged=true'>
</div>
<div class="col col-15">
<input type="number" ng-model="item.threshold" min="1" step="1" max="99999999" ng-change='fieldchanged=true'>
</div>
<div class="col col-10">
<button class="button button-small button-{{colorTheme}} ion-checkmark " ng-click="processItem(item)"></button>
</div>
</div>
</div>
</div>
</div>
</form>
The rendering is fine when I use ionic serve but it is misaligned if i try to view it in my samsung s4 device. are there any special commands to have a better alignment in the device?
Here’s a screen shot from my device:
samsung s4 screen shot
Here’s the screen shot from ionic serve:
