Sproutcore: Using a custom view as a contentView in SC.ScrollView

Question

Im using SproutCore 1.x and im trying to use a custom view as a contentView for SC.ScrollView.

Code looks something like this:

SC.ScrollView.design({
 canScrollVertical:true,
 hasHorizontalScroller:false,
 contentView:SC.View.design({
      className:"myClass",
      render:function(context){
        var context = context.begin('div');
        context.push('LOTS OF THINGS HERE TAKING UP SOME LARGE ARBITRARY AMOUNT OF SPACE…');
        context.end();
      }
 })
})

The problem is that because the size of the contentView is arbitrary (i.e. it changes dynamically based on the information loaded into it), the scroll view seems to not know that it needs to scroll. I cannot set the height absolutely because I do not know the amount of content that will be loaded into it.

How do I tell the scroll view to look at the height of the contentView dynamically?

Answer 1

Try setting

useStaticLayout: YES

in your custom view, and don't set a height in the view's layout. Alternatively, mix in SC.FlowedLayout if your custom view has child views. Basically I am saying use relative positioning instead of absolute positioning.

Alternatively, you might be able to compute how high the view will be based on the content and adjust the height property of the view (i.e. this.adjust({height: 100}) within the view, whenever the content changes). That hooks in really nicely with animations. Might not be possible though, depending on the nature of your content.

As a side note, if you are not doing drag and drop (probably not, since you custom view is not a collection), or you don't need to hook into SC's events with the scroller (like you do if you want to dnd things) you can just add a div with overflow=auto to your view at the top level; you don't even need an SC scroll view. If you do this you get the browser's native scroller, which might be good.