Mysterious famous-surface under famous-container

Question

I have a simple mobile app I am putting together. I am trying to understand where a famous surface is coming from, because I think it is causing issues when I try to position an element in the upper-right-hand corner. (But for now let's stick with this mysterious surface)

The following code:

var mainContext = Engine.createContext()
var surface = new ContainerSurface
mainContext.add(surface)

Results in an element structure:

<body class=" hasGoogleVoiceExt famous-root">
<div class="famous-container" style="perspective: 1000px; -webkit-perspective: 1000;">
    <div class="famous-surface"
         style="width: 1366px; height: 0px; opacity: 0.999999; -webkit-transform-origin: 0% 0%; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
        <div class="famous-group famous-container-group"></div>
    </div>
</div>
</body>

Where does that <div class="famous-surface">...</div> come from?
What specifically concerns me is that the height is listed as '0px'.

Thanks,

JD

you should check talves answer it's right and then it doesn't look like the question hasn't been solved. — aintnorest, Oct 03 '14 at 07:44

talves · Answer 1 · 2014-09-29T16:31:03.563

There is nothing "mysterious" about this DOM element. The famous-surface is exactly what the class implies. The element is a famous Surface created by your code when you .add(surface) to the context. This one happens to be a ContainerSurface so it will not size until it has a group created by adding an element to it.

var mainContext = Engine.createContext(); 
var surface = new ContainerSurface();
mainContext.add(surface);

Explanation

You created a context "famous-container" on the first line above. The second line creates the container object, but it is still not added to the context. The third line creates the container in the view and adds the DOM element as a child of the context element.

Size: You did not add a size to your surface, so the default height stays 0px. Your width came from the undefined value (default) which tells famo.us to make the width the width of it's parent which in this case is the context.

Try this code:

var Engine = require('famous/core/Engine');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();
var cSurface = new ContainerSurface({
    properties: {
        backgroundColor: 'rgba(0, 0, 0, 0.25)'
    }
});
var surface = new Surface({
    size: [200, 200],
    content: 'I am 200x200',
    properties: {
        backgroundColor: 'rgba(255, 0, 0, 0.25)'
    }
});

cSurface.add(surface);
mainContext.add(cSurface);

You will then see there is your container surface (grey) created with it's child famous-group and the child famous-surface (pink).

Mysterious famous-surface under famous-container

1 Answers1

Explanation