Question

我希望我只是缺少一些基本的东西，但是在使用任何类型的布局（GridLayout或SequentialLayout）时，我似乎无法在垂直平面上正确定位任何着名的曲面。

如果我创建一个包含1列和3行的GridLayout，然后添加3个表面，我希望这3个表面共享所有可用空间，将其垂直划分为3个相等的部分并占用整个可用宽度。但是，相反，所有三个表面都占据可用空间顶部的第一个网格位置。但是，如果我将其更改为3列和1行，则网格正确地将可用水平空间划分为三个相等的部分，并将三个表面正确分配给单元格。然而，即使在这种情况下，表面的垂直尺寸也不合适（我希望它们占据整个可用的垂直空间，但是如果在CSS中我将它们设置为＆＃39，它们只会占用它们所需的空间量。 ; height：auto;＆＃39;

我创建了一个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']);
});

任何帮助都将不胜感激!!!

Answer 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示例，以便为那些可能希望尝试这一点的人使用这个新软件包！

Famo.us GridLayout没有垂直正确地布置表面

1 个答案: