fix(collectionRepeat): fix a dom problem with margins and position:re…

…lative Closes #3277.
ionic-team · Mar 11, 2015 · 83a20c6 · 83a20c6
1 parent 2c2662f
commit 83a20c6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js
@@ -483,6 +483,18 @@ function RepeatManagerFactory($rootScope, $window, $$rAF) {
         repeaterBeforeSize += current[isVertical ? 'offsetTop' : 'offsetLeft'];
       } while( ionic.DomUtil.contains(scrollView.__content, current = current.offsetParent) );
 
+      var containerPrevNode = containerNode.previousElementSibling;
+      var beforeStyle = containerPrevNode ?  $window.getComputedStyle(containerPrevNode) : {};
+      var beforeMargin = parseInt(beforeStyle[isVertical ? 'marginBottom' : 'marginRight'] || 0);
+
+      // Because we position the collection container with position: relative, it doesn't take
+      // into account where to position itself relative to the previous element's marginBottom.
+      // To compensate, we translate the container up by the previous element's margin.
+      containerNode.style[ionic.CSS.TRANSFORM] = TRANSLATE_TEMPLATE_STR
+        .replace(PRIMARY, -beforeMargin)
+        .replace(SECONDARY, 0);
+      repeaterBeforeSize -= beforeMargin;
+
       if (!scrollView.__clientHeight || !scrollView.__clientWidth) {
         scrollView.__clientWidth = scrollView.__container.clientWidth;
         scrollView.__clientHeight = scrollView.__container.clientHeight;

diff --git a/test/html/collection-repeat/basic-list.html b/test/html/collection-repeat/basic-list.html
@@ -17,7 +17,7 @@
       <h1 class="title">Basic List: Static Dimensions</h1>
     </ion-header-bar>
     <ion-content>
-      <h4>WHATS UP</h4>
+      <h4 style="margin: 80px;">I have 80px margin</h4>
       <ion-list can-swipe="true" show-delete="$root.showDelete">
         <ion-item class="item" collection-repeat="item in items">
           <ion-option-button>Button</ion-option-button>