Columns not aligned in samsung s4


#1

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:

screen shot from ionic serve


#2

On android < 5.x the CSS result can be very tricky, samsung s4 have android 4.x so you can try with crosswalk and see if looks better, or check and try with different CSS style to adjust the behavior.


#3

thanks, but my samsung is currently at version 5.0.1. Does that have the same issue?


#4

I don’t know, but you can try with crosswalk or also with debug, or try to change your grid and see what happens.

However very small grid doesn’t work very well, especially on small display and s4 have only 540 horizontal pixels.

Again… please make sure that row is full (15+15+5+15+15+10 is not 100% wide).

Another… try to remove col-xx and use style=“width:15%”.

Unfortunately on android there are too much combinations to support and test…


#5

ok, thanks for your input. i’ll try crosswalk.