Famo.us GridLayout不能正确地垂直布置表面

我期望我只是缺少一些基本的东西，但我似乎无法使用任何布局（GridLayout或SequentialLayout）在垂直平面中正确定位自身）。Famo.us GridLayout不能正确地垂直布置表面

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

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

任何援助，将不胜感激！

来源

2014-12-07 Peter Pavlovich

因此，经过大量的实验后，我发现了我缺少的东西：fa-app元素的CSS样式！当我添加以下CSS到应用程序（在一个叫根客户端目录“的main.css”的新文件），一切都开始按预期工作：

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

不错！我已经提前创建了一个流星软件包，它使得在流星应用程序中使用着名的角度变得容易：'sgi：famous-angular'。这个软件包包含了开源的着名角度的JS文件和附带的CSS，并且指定了两个依赖项：一个将Angular引入，另一个引入Famo.us。您仍然必须将上面的CSS包含在主应用程序的CSS中布局才能正常工作。我已经更新了我的github示例，以便使用这个新软件包给那些可能希望为之一炮打响的人！

来源

2014-12-09 05:52:35

酷！你能发送一个链接到该存储库的Github吗？我们可能会将它包含在角流星图中 – Urigo 2014-12-14 14:23:17

Famo.us GridLayout不能正确地垂直布置表面

回答

相关问题