0

I want to make a grid in which i want to two images in each row. I am using flex-wrap: wrap; it is working fine on android 4.4+ but not working with less than android 4.4. I want to achieve this with out using flex-wrap

Here is my view:

<ion-view class="feeds-categories-view">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon">    </button>
  </ion-nav-buttons>
 <ion-nav-title>
    <span>Feeds Categories</span>
  </ion-nav-title>
  <ion-content scroll="true" class="has-header has-subheader">
    <div class="row-cat row">
        <div class="col col-50" ng-repeat="items in ProductList">
         <img ng-src="{{items.image}}" width="100%" />
       </div>
    </div>    

  </ion-content>
</ion-view>

Controller:

.controller('Home-FeedsCtrl', function($scope) {


  $scope.ProductList = [
{"id":"1","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"2","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-   iPhone-b-font-5-5G.jpg"},
{"id":"3","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"4","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"5","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"6","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"7","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"8","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
{"id":"9","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b-    iPhone-b-font-5-5G.jpg"},
]
})

Stylesheet:

.cat-img-box{
  width: 50%
}


.row-cat{
    margin-top: 15px !important;

flex-wrap: wrap !important;
}
.col-cat{
  padding: 20px !important;
}
Salman Ullah Khan
  • 730
  • 10
  • 29

2 Answers2

1

Put this css into your css file.

.row .col:nth-child(2n+1){float:none;}

This will make the float none after 2nd element of the loop.

Vishal Sharma
  • 1,372
  • 1
  • 8
  • 17
  • While a code only answer solves the problem for the op, it isn't recommended as it provides no value for future visitors, a answer that only provides is quickly going to be flagged as "very low quality" and by the result of that it will be deleted quickly. [edit] your answer to include an explanation what the provided code does. – Ferrybig Feb 11 '16 at 09:17
1
<div ng-repeat="(key, image) in images">
    <div class="row" ng-show="$even">
        <div class="col"><img src="images[$index]"></div>
        <div class="col"><img src="images[$index+1]"></div>
    </div>
</div>

Shis could work.

reference: Create Row every after 2 item in Angular ng-repeat - Ionic Grid

Community
  • 1
  • 1
Jurien
  • 82
  • 7