How to create empty space between the Surfaces in ScrollView in famo.us? -

How to create empty space between the Surfaces in ScrollView in famo.us? -

i've created horizontal scrollview , added surfaces it. want have empty space between surfaces when scroll (swipe) view. i've tried setting margins, padding, borders, etc.. in properties of surfaces , scrollview surfaces remain connected no matter what.

does know how can accomplish this?

this done few ways. non-famo.us approach add together surfaces , utilize content html create margins. sake of example, assume want list of surfaces need margin!

i knew itemspacing in sequntiallayout, , surprised not find such thing in scrollview well. solve problem, added surfaces sequentiallayout, , add together sole item in scrollview.

also note added background surface, capture mouse events happen between surfaces!

here did.. hope helps!

var engine = require("famous/core/engine"); var surface = require("famous/core/surface"); var scrollview = require("famous/views/scrollview"); var sequentiallayout = require("famous/views/sequentiallayout"); var maincontext = engine.createcontext(); var bg = new surface({ size:[undefined,undefined] }); var scrollview = new scrollview(); var scrollsurfaces = []; scrollview.sequencefrom(scrollsurfaces); var sequentiallayout = new sequentiallayout({itemspacing:20}); var surfaces = []; sequentiallayout.sequencefrom(surfaces); (var = 0; < 40; i++) { var surface = new surface({ content: "surface: " + (i + 1), size: [undefined, 200], properties: { backgroundcolor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)", lineheight: "200px", textalign: "center" } }); surface.pipe(scrollview); surfaces.push(surface); } scrollsurfaces.push(sequentiallayout); bg.pipe(scrollview); maincontext.add(bg); maincontext.add(scrollview);

famo.us