Scroll Height Famo.us

Question

I am trying to add an image under scrollview using the well-known sequentialLayout and im having problems with scrollview height.

This is how I create my scrollview.

var scrollview = new Scrollview({       
    direction: Utility.Direction.X,
    options: {
        size: [300, 300]
    },        
    paginated: true
});

When I add surfaces to a scrollview with a height of 250, the parent DOM container of the scrollview (known group) containing these surfaces has a width and height of 0.

When you add this scroll to the sequentialLayout as the first element, the second element or surface with height is displayed on top of this scroll because it has no height.

Any ideas how to fix this using Famo.us?

Answer 1

You cannot set this size - use a modifier for this.

MainContext
   SequentialLayout
      Modifier(size)
          ScrollView
      Modifier(size)
          Image

:

// Create components
var scrollview = new ScrollView();
var image = new ImageSurface({
    content: 'content/images/famous_symbol_transparent.png'
});

// Create Size Modifiers
var scrollModifier = new StateModifier({ size: [200,200]});
var imageModifier = new StateModifier({ size: [200,200]});

// Wrap the Modifier in a RenderNode, so we can add the surface
// (you can't add surfaces directly to a modifier)
var scrollNode = new RenderNode(scrollModifier)
scrollNode.add(scrollview);

var imageNode = new RenderNode(imageModifier);
imageNode.add(image);

// Create a SequentialLayout
var sequence = new SequentialLayout();
sequence.sequenceFrom([scrollNode,imageNode]);

gist (- main.js yo famous)