Famo.us GridLayout не выкладывает поверхности по вертикали

Я ожидаю, что мне просто не хватает чего-то базового, но я не могу заставить какую-либо известную поверхность правильно позиционировать себя в вертикальной плоскости при использовании любого вида компоновки (GridLayout или SequentialLayout).

Если я создаю GridLayout с 1 столбцом и 3 строками, а затем добавляю 3 поверхности, я ожидаю, что эти 3 поверхности будут разделять все доступное пространство, разделив его по вертикали на 3 равных участка и занимая всю доступную ширину. Однако вместо этого все три поверхности занимают первую позицию сетки в верхней части доступного пространства. Однако, если я изменю его на 3 столбца и 1 строку, сетка правильно разделит доступное горизонтальное пространство на три равные части, и три поверхности будут правильно назначены ячейкам. Однако даже в этом случае поверхности не имеют правильного размера по вертикали (я ожидаю, что они занимают все доступное вертикальное пространство, но они занимают только то пространство, которое было бы, если бы в CSS я установил их в 'height: авто;'

Я создал проект github, чтобы вам было проще его опробовать, и я опубликовал его как приложение на meteor.com, чтобы вы могли увидеть его в действии здесь: http://meteor-angular-famous-demo.meteor.com/ known -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']);
});

Любая помощь будет оценена!!!

Источник

1 ответ

Решение

Итак, после долгих экспериментов я обнаружил, чего мне не хватало: CSS-стилизации элемента fa-app! Когда я добавил следующий CSS-код в приложение (в новом файле с именем 'main.css' в корневом каталоге клиента), все начало работать должным образом:

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

Ницца! Я пошел дальше и создал пакет meteor, который упрощает использование знаменитых угловых приложений в метеоритах: sgi: known-angular. Этот пакет включает в себя известный JS-файл с открытым исходным кодом и сопровождающий его CSS, а также указывает две зависимости: одну для ввода Angular и одну для ввода Famo.us. Вы все еще должны включить вышеуказанный CSS в CSS основного приложения для вертикальной верстка для правильной работы. Я обновил свой пример с github, чтобы использовать этот новый пакет для тех, кто может попробовать!

Источник
Другие вопросы по тегам