feat(collectionRepeat): automatically set width/height style to match collection-item-{width,height}

Closes #3034. Closes #1806.

Author: ajoslin

js/angular/service/collectionRepeatDataSource.js

@@ -61,7 +61,6 @@ function($cacheFactory, $parse, $rootScope) {
 
       item.scope = this.scope.$new();
       this.transcludeFn(item.scope, function(clone) {
-        clone.css('position', 'absolute');
         item.element = clone;
       });
       this.transcludeParent.append(item.element);

js/angular/service/collectionRepeatManager.js

@@ -310,15 +310,25 @@ function($rootScope, $timeout) {
     renderItem: function(dataIndex, primaryPos, secondaryPos) {
       // Attach an item, and set its transform position to the required value
       var item = this.dataSource.attachItemAtIndex(dataIndex);
+      var itemDimensions = this.dimensions[dataIndex];
       //console.log(dataIndex, item);
       if (item && item.element) {
         if (item.primaryPos !== primaryPos || item.secondaryPos !== secondaryPos) {
-          item.element.css(ionic.CSS.TRANSFORM, this.transformString(
+          item.element[0].style[ionic.CSS.TRANSFORM] = this.transformString(
             primaryPos, secondaryPos
-          ));
+          );
           item.primaryPos = primaryPos;
           item.secondaryPos = secondaryPos;
         }
+
+        var width = this.isVertical ? itemDimensions.secondarySize : itemDimensions.primarySize;
+        var height = this.isVertical ? itemDimensions.primarySize : itemDimensions.secondarySize;
+        if (item.cssWidth !== width) {
+          item.element[0].style.width = (item.cssWidth = width) + 'px';
+        }
+        if (item.cssHeight !== height) {
+          item.element[0].style.height = (item.cssHeight = height) + 'px';
+        }
         // Save the item in rendered items
         this.renderedItems[dataIndex] = item;
       } else {

scss/_util.scss

@@ -248,3 +248,9 @@
 .dark-border {
   border-color: $button-dark-border;
 }
+
+[collection-repeat] {
+  /* Position is set by transforms */
+  left: 0 !important;
+  position: absolute !important;
+}

test/html/list-fit.html

@@ -31,9 +31,7 @@ <h1 class="title">Hi</h1>
           ng-click="alert(item)"
           collection-repeat="item in items"
           collection-item-height="85"
-          collection-item-width="'100%'"
-          ng-style="{height: '85px'}"
-          style="left: 0; right: 0;">
+          collection-item-width="'25%'">
           <h2>{{item.text}}</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor diam urna, vitae consectetur lectus aliquet quis.</p>
           <ion-option-button>DEL</ion-option-button>