我希望我只是缺少一些基本的东西,但是在使用任何类型的布局(GridLayout或SequentialLayout)时,我似乎无法在垂直平面上正确定位任何着名的曲面。
如果我创建一个包含1列和3行的GridLayout,然后添加3个表面,我希望这3个表面共享所有可用空间,将其垂直划分为3个相等的部分并占用整个可用宽度。但是,相反,所有三个表面都占据可用空间顶部的第一个网格位置。但是,如果我将其更改为3列和1行,则网格正确地将可用水平空间划分为三个相等的部分,并将三个表面正确分配给单元格。然而,即使在这种情况下,表面的垂直尺寸也不合适(我希望它们占据整个可用的垂直空间,但是如果在CSS中我将它们设置为&#39,它们只会占用它们所需的空间量。 ; height:auto;'
我创建了一个github项目,让您可以轻松地尝试,如果您愿意,我会在meteor.com上将其作为应用程序发布,以便您可以在此处看到它:http://meteor-angular-famous-demo.meteor.com
供参考,以下是我正在使用的代码:
HTML:
<head>
<title>Meteor-Angular-Famous GridLayout Test</title>
</head>
<body>
<fa-app ng-controller="mainController" id="app">
<fa-grid-layout fa-options="myGridLayoutOptions">
<fa-surface>
hello1
</fa-surface>
<fa-surface>
hello2
</fa-surface>
<fa-surface>
hello3
</fa-surface>
</fa-grid-layout>
</fa-app>
</body>
JS:
Meteor.startup(function () {
angular.module('taskMaster', ['angular-meteor', 'famous.angular'])
.controller('mainController', ['$scope', function($scope){
$scope.myGridLayoutOptions = {
dimensions: [1,3]
};
}]);
angular.bootstrap(document, ['taskMaster']);
});
任何帮助都将不胜感激!!!
答案 0 :(得分:1)
所以,经过多次实验,我发现了我所缺少的东西:fa-app元素的CSS样式!当我将以下CSS添加到应用程序时(在根客户端目录中名为&#39; main.css&#39;的新文件中),所有文件都按预期开始工作:
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
尼斯!我已经开始创建了一个流星包,它可以轻松地在流星应用中使用着名的角度:&#39; sgi:famous-angular&#39;。这个软件包包括开源的着名角度JS文件和附带的CSS以及指定两个依赖项:一个用于引入Angular,另一个用于引入Famo.us。您仍然必须在主应用程序中包含上述CSS&#39;用于垂直布局的CSS工作正常。我已经更新了我的github示例,以便为那些可能希望尝试这一点的人使用这个新软件包!