Trying to make a dynamic scrollable tree with famo.us and user generated content

Question

I am pretty new to Famou.us, so please be gentle if this is a dumb question:

I am struggling to choose the right Famous constructs to create a scrollable "page" within an app that is in effect a tree made up of multiple child-nodes that includes user generated content. As the content is user generated there are an unknown number of children nodes.The amount of space required for each node is known at design time as it's user generated.

I could see how it would work for lists/trees where the content is sized uniformly... so it's the dynamic requirement here that's confusing me.

I tried using:

1) GridLayout, however this does not work as each cell/row in the grid is uniform.. so if each one of the cells has more or less content it does not seem work. For example, if the grid dimensions are [1,5] and the 3rd cell has more content than the other cells (or space available) it does not seem possible to have the size of that cell change dynamically (as it would with a or in HTML).

I tried including a SequentialLayout in each grid cell, which worked to a certain extent, but the sizing and scrolling did not seem to work.

2) Nested "SequentialLayout"s. For example parent SequentialLayouts with X-orientation depicting the columns and then nesting other Y-orientated SequentialLayouts inside each one of the parent X-oriented

Anyway I tried a bunch of other Famous Views and variations but could not seem to get one that behaved like a or in HTML that scrolled easily.

I am hoping there is a simple pattern/best practice for this type of page.

Perhaps there's an example that would make this clear to me, please?

BTW, I am using Meteor + Famous. I do see the Paper example https://github.com/jperl/paper , however this seems to be more of a drill down approach vs show everything on the page. Also it's a bit complex... I just need some baby steps.

This was one of my many simple tests using https://famous-views.meteor.com implementation of famous:

(Apologies if this is not pure famous JS, but hopefully you'll get the gist)

```

{{#Scrollview size="[undefined,undefined]"}}

    {{#GridLayout dimensions="[1,2]" size="[undefined,undefined]"}}
        {{#Surface size="[undefined,undefined]" class="well"}}This is some content{{/Surface}}
        {{#GridLayout dimensions="[4,1]" size="[undefined,undefined]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}
            <p>Col 1- Nam libero nisi, scelerisque vitae velit nec, tincidunt rhoncus diam. Duis eleifend diam neque, ut sagittis mi maximus a. Aliquam suscipit vel purus gravida porta. Praesent dignissim iaculis posuere. Nunc ultrices, purus eget sagittis hendrerit, leo arcu pretium neque, eget bibendum quam odio a massa. Vivamus laoreet arcu vel orci lobortis sodales. Praesent non tristique lacus, eget pretium mauris. Suspendisse tempor, nisl eu volutpat blandit, eros nibh tristique felis, sit amet dictum nibh mi eu turpis.</p>
            {{/Surface}}
            {{#GridLayout dimensions="[2,1]" size="[undefined,undefined]"}}
                {{#Surface size="[150,100]" class="red-bg"}}
                <h1>#a.1</h1>
                <p>Nam libero nisi, scelerisque vitae velit nec, tincidunt rhoncus diam. Duis eleifend diam neque, ut sagittis mi maximus a. Aliquam suscipit vel purus gravida porta. Praesent dignissim iaculis posuere. Nunc ultrices, purus eget sagittis hendrerit, leo arcu pretium neque, eget bibendum quam odio a massa. Vivamus laoreet arcu vel orci lobortis sodales. Praesent non tristique lacus, eget pretium mauris. Suspendisse tempor, nisl eu volutpat blandit, eros nibh tristique felis, sit amet dictum nibh mi eu turpis.</p>
                {{/Surface}}
                {{#Surface size="[150,100]" class="green-bg"}}<h1>#b.1</h1>{{/Surface}}
                {{#Surface size="[150,100]" class="blue-bg"}}<h1>#c.1</h1>{{/Surface}}
                {{/GridLayout}}
                {{#GridLayout dimensions="[4,6]" size="[undefined,undefined]"}}
                {{#Surface size="[undefined,200]" origin="[0,0]" }}<img src="http://photos-f.ak.instagram.com/hphotos-ak-xfa1/10616600_789642611058461_2076006948_n.jpg"/>{{/Surface}}
                {{#Surface size="[undefined,500]"  origin="[0,0]" class="well"}}#a.2{{/Surface}}
                {{#Surface size="[undefined,300]" origin="[0,0]" class="well"}}#b.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#c.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#d.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#e.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#f.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#g.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#h.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#i.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#j.2{{/Surface}}
            {{/GridLayout}}
            {{#View size="[undefined,600]"}}
                {{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
                    {{#Surface size="[150,50]" class="well"}}#1
                    <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>
                    {{/Surface}}
                    {{#Surface size="[150,300]" class="well"}}#2{{/Surface}}
                    {{#Surface size="[150,100]" class="well"}}#3{{/Surface}}
                {{/SequentialLayout}}
            {{/View}}

        {{/GridLayout}}

    {{/GridLayout}}

{{/Scrollview}}

```

The result looks like:

Here's another example, using SequentialLayout inside a ScrollView and then nesting Grids:

```

{{#Scrollview size="[undefined,200]"}}

    {{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
        {{#GridLayout dimensions="[3,1]" size="[undefined,400]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1
            <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

            {{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}

    {{/SequentialLayout}}



    {{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
        {{#GridLayout dimensions="[2,1]" size="[undefined,200]"}}
        {{#Surface size="[undefined,undefined]" class="well"}}col1
        <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

        {{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}

    {{/SequentialLayout}}
{{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
{{#GridLayout dimensions="[4,1]" size="[undefined,400]"}}
{{#Surface size="[undefined,undefined]" class="well"}}col1
<p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

{{/Surface}}
{{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
{{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
{{/GridLayout}}

{{/SequentialLayout}}
{{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
    {{#GridLayout dimensions="[4,1]" size="[undefined,200]"}}
        {{#GridLayout dimensions="[4,1]" size="[undefined,undefined]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1
            <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

            {{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1
            <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

            {{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}
        {{#Surface size="[undefined,undefined]" class="well"}}col1
        <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

        {{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col1
        <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

        {{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
    {{/GridLayout}}

{{/SequentialLayout}}

{{/Scrollview}}

```

It looks like: