0

I expect that I am just missing something basic, but I cannot seem to get any famous surface to position itself correctly in the vertical plane when using any sort of layout (GridLayout or SequentialLayout).

If I create a GridLayout with 1 column and 3 rows, then add 3 surfaces, I would expect these 3 surfaces to share all available space, dividing it vertically into 3 equal sections and taking up the entire available width. However, instead, all three surfaces occupy the first grid position at the top of the available space. However, if I change it to 3 columns and 1 row, the grid correctly divides the available horizontal space into three equal parts and the three surfaces are properly assigned to the cells. However, even in that case, the surfaces are not properly sized vertically (I expect them to take up the entire available vertical space but they only take up the amount of space they would if, in CSS, I had set them to 'height: auto;'

I created a github project to make it easy for you to try it out if you wish and I published it as an app on meteor.com so you can see it in action here: http://meteor-angular-famous-demo.meteor.com

For reference, below is the code I am using:

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

Any assistance would be appreciated!!!

Peter Pavlovich
  • 91
  • 1
  • 5

1 Answers1

1

So, after much experimentation, I found out what I was missing: CSS styling of the fa-app element! When I added the following CSS to the app (in a new file called 'main.css' in the root client directory), all started working as expected:

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

Nice! I have gone ahead and created a meteor package which makes using famous-angular in meteor apps easy: 'sgi:famous-angular'. This package includes the open source famous-angular JS file and accompanying CSS as well as specifing two dependencies: one to bring Angular in and one to bring Famo.us in. You still have to include the above CSS in your main app's CSS for vertical layout to work right. I've updated my github example to use this new package for those who might wish to give this a shot!

Peter Pavlovich
  • 91
  • 1
  • 5
  • 1
    Cool! Can you send a link to the Github of that repository? we might include it in the angular-meteor page – Urigo Dec 14 '14 at 14:23