Opened 12 years ago

Closed 12 years ago

Last modified 9 years ago

#5457 closed defect (invalid)

dojox.layout.ScrollPane in TabContainer not scrolling

Reported by: guest Owned by: dante
Priority: high Milestone: 1.1
Component: DojoX Layout Version: 1.0
Keywords: dojox.ScrollContainer scrolling Cc: dante
Blocked By: Blocking:

Description

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>

Change History (3)

comment:1 Changed 12 years ago by dante

Component: GeneralDojox
Milestone: 1.0.31.1
Owner: changed from anonymous to dante
Summary: Dojox.ScrollPane in TabContainer not scrollingdojox.layout.ScrollPane in TabContainer not scrolling

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

comment:2 Changed 12 years ago by dante

Resolution: invalid
Status: newclosed

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);					
				}
			});
			

comment:3 Changed 9 years ago by bill

Component: DojoxDojoX Layout
Note: See TracTickets for help on using tickets.