ng重复相对位置元素的大小不正确

我正在使用angularjs和zurb基础。我有ng-重复创建一个项目中的每个项目的行。每行本身有两行。我正在使用相对位置来将第二个内部行向上移动到第一个内部行之后。第一行有z-index 1将它移到最上面。目标是创建一个最初隐藏在div后面的菜单。ng重复相对位置元素的大小不正确

似乎工作除了一个缺陷。我遇到的问题是，该指令似乎将其高度设置为其内容的初始高度。所以这个指令是12em高，而内容只在上半部分。

强制指令为6em高的作品为第一个项目，但后来的所有后排的内容都jibbly wibbly！（我相信这是科学术语）

任何帮助，将不胜感激。在这种情况下，我的头撞到键盘通常是我的'去'，但在这种情况下它并没有帮助。

样品

//index.html 
<div ng-repeat='item in items'> 
    <div directive></div>//ends up 12em 
</div> 

//directive.html 
<div class="row front">//6em tall 
    //content 
</div> 
<div class="row back">//moved 6em up 
    //Menu with buttons 
</div> 

//style.css 
front: { 
    height: 6em; 
    z-index: 1; 
} 
back: { 
    height: 6em; 
    position: relative; 
    top: -6em; 
}

来源

2014-06-07 Berkeley Martinez

的问题是，你正在试图定位两个div相对定位。他们不需要是相对的，因为他们打算占据相同的空间。

让父DIV使用相对定位：

.parent { position: relative; } 
.front { position: absolute; top: 0; height: 6em; } 
.back { position: absolute: top:0; height: 6em }

来源

2014-06-08 15:56:08 pixelbits

添加绝对位置给孩子div的原因，应用大发脾气。可能是由于ng-repeat和ng-directive添加了div。 :( –

其实这是接近正确的解决方案，所以我会给你。我不得不给予.back包含元素绝对位置。这固定了洞的东西。谢谢！ –

https://docs.angularjs.org/api/ng/directive/ngRepeat

这是我会怎么做：

app.directive('row front', function() { 
    return { 
    restrict: '6pm', 
    scope: { 
     collection: '=', 
     columnCount: '=' 
    }, 
    transclude: true, 
    template: '<div><div class="column" ng-repeat="col in cols">' + 
     '<div ng-repeat="item in col" ng-transclude></div>' + 
     '</div></div>', 
    link: function(scope) { 
     var partition = function partition(size, items) { 
     if (items.length === 0) { return []; } 
     return ([items.slice(0, size)]).concat(partition(size, items.slice(size))); 
     }; 
     var relativenize = function() { 
     if (!scope.columnCount) { return; } 
     scope.cols = partition(scope.columnCount, scope.collection); 
     }; 
     scope.$watch('columnCount', columnize); 
     scope.$watch('collection', columnize); 
    } 
    }; 
});

来源

2014-06-07 19:30:27 Pototo

ng重复相对位置元素的大小不正确

回答

相关问题