feat(collectionRepeat): automatically set width/height style to match…

… collection-item-{width,height} Closes #3034. Closes #1806.
ionic-team · Feb 6, 2015 · 34e350b · 34e350b
1 parent 0145dc3
commit 34e350b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/js/angular/service/collectionRepeatDataSource.js b/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);

diff --git a/js/angular/service/collectionRepeatManager.js b/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 {

diff --git a/scss/_util.scss b/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;
+}
diff --git a/test/html/list-fit.html b/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>