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

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

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

Я создал проект 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

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

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

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

источник

2014-12-09 05:52:35

Прохладный! Можете ли вы отправить ссылку на Github этого хранилища? мы могли бы включить его в страницу углового метеор – Urigo

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

ответ

Смежные вопросы