dojox.layout.ScrollPane in TabContainer not scrolling

[guest]

Dojox.ScrollPane? does not work in TabContainer?

Dante can find an example on dc/~nonken/

Following markup does not scroll (with ContentPane? instead of LayoutContainer? as well):

<div dojoType="dijit.layout.LayoutContainer?" style="width:401px; height:400px; border:1px solid #b7b7b7;">

<div dojoType="dojox.layout.ScrollPane?" sizeShare="20" layoutAlign="left" style="width:100px; height:400px; border-right:1px solid #333">

<ol class="list">

<li id="cloneMe"><a href="#"><span>testItem</span></a></li>

<li id="cloneMe1"><a href="#"><span>testItem</span></a></li> <li id="cloneMe2"><a href="#"><span>testItem</span></a></li> <li id="cloneMe3"><a href="#"><span>testItem</span></a></li> <li id="cloneMe4"><a href="#"><span>testItem</span></a></li> <li id="cloneMe5"><a href="#"><span>testItem</span></a></li> <li id="cloneMe6"><a href="#"><span>testItem</span></a></li> <li id="cloneMe7"><a href="#"><span>testItem</span></a></li> <li id="cloneMe8"><a href="#"><span>testItem</span></a></li> <li id="cloneMe9"><a href="#"><span>testItem</span></a></li> <li id="cloneMe0"><a href="#"><span>testItem</span></a></li> <li id="cloneMe11"><a href="#"><span>testItem</span></a></li> <li id="cloneMe12"><a href="#"><span>testItem</span></a></li> <li id="cloneMe13"><a href="#"><span>testItem</span></a></li> <li id="cloneMe14"><a href="#"><span>testItem</span></a></li> <li id="cloneMe15"><a href="#"><span>testItem</span></a></li> <li id="cloneMe16"><a href="#"><span>testItem</span></a></li> <li id="cloneMe17"><a href="#"><span>testItem</span></a></li> <li id="cloneMe18"><a href="#"><span>testItem</span></a></li> <li id="cloneMe19"><a href="#"><span>testItem</span></a></li> <li id="cloneMe20"><a href="#"><span>testItem</span></a></li> <li id="cloneMe21"><a href="#"><span>testItem</span></a></li> <li id="cloneMe22"><a href="#"><span>testItem</span></a></li> <li id="cloneMe23"><a href="#"><span>testItem</span></a></li> <li id="cloneMe24"><a href="#"><span>testItem</span></a></li>

</ol>

</div> <div layoutAlign="right" dojoType="dijit.layout.ContentPane?" style="width:300px">

<p>Foo!</p>

</div>

</div>

[dante]

it's actually the same issue of all layout widgets: layout() isn't called initially when the pane is display:none (default style for hidden tabs, et al) ... the layout() that bubbles when something like window.resize causes the scrolling to trigger (resize the browser while the tab is visible and the calculations are accurate). a workaround would be to dojo.subscribe to the tab's "selected" topic, and call layout() at least once to make sure the sizes can be calculated.

one solution to suggest to dijit.layout would be an onFisrtShow-like event to connect to, so the user could call custom code (or simply assume the need to call layout() onFirstShow) and work around problem of sizing and display:none

[dante]

here is a workaround:

// connect to selectChild of the right tab container until the scrollPane
			// is shown for the first time, then call layout and disconnect the subscription
			spConnect = dojo.subscribe("index-tabs-right-selectChild",function(m){
				if(m == dijit.byId("spotlightTab")){
					dijit.byId("spotlightScroller").layout();
					dojo.unsubscribe(spConnect);					
				}
			});