0

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

如果我创建一个 1 列和 3 行的 GridLayout，然后添加 3 个表面，我希望这 3 个表面共享所有可用空间，将其垂直分成 3 个相等的部分并占据整个可用宽度。然而，相反，所有三个表面都占据了可用空间顶部的第一个网格位置。但是，如果我将其更改为 3 列和 1 行，则网格会正确地将可用的水平空间分成三个相等的部分，并且将三个表面正确分配给单元格。然而，即使在这种情况下，表面的垂直尺寸也没有正确调整（我希望它们占据整个可用的垂直空间，但它们只占用在 CSS 中我将它们设置为“高度”时它们会占用的空间量：汽车;'

我创建了一个 github 项目，让您可以轻松尝试，如果您愿意，我将它作为应用程序发布在 meteor.com 上，以便您可以在此处看到它的实际效果：http://meteor-angular- Famous-demo。流星网

作为参考，以下是我正在使用的代码：

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']);
});

任何援助将不胜感激！！！

4

1 回答 1

1

所以，经过大量实验，我发现了我缺少的东西：fa-app 元素的 CSS 样式！当我将以下 CSS 添加到应用程序（在根客户端目录中名为“main.css”的新文件中）时，所有内容都按预期开始工作：

fa-app {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

好的！我已经继续创建了一个流星包，它使在流星应用程序中使用著名的角度变得容易：'sgi：著名的角度'。这个包包括开源著名的 Angular JS 文件和随附的 CSS 以及指定两个依赖项：一个用于引入 Angular，一个用于引入 Famo.us。您仍然必须在主应用程序的 CSS 中包含上述 CSS 以实现垂直布局工作正常。我已经更新了我的 github 示例，以便为那些可能希望试一试的人使用这个新包！

于 2014-12-09T05:52:35.283 回答