[Dojo-checkins] bill - r27034 - in dijit/trunk: layout tests/layout themes

[dojo-checkins-admin at dojotoolkit.org]

Author: bill
Date: Wed Nov 16 02:47:19 2011
New Revision: 27034

Modified:
   dijit/trunk/layout/StackController.js
   dijit/trunk/tests/layout/StackContainer.html
   dijit/trunk/themes/dijit.css
Log:
Woops, can't set overflow:visible on the .dijitTabListWrapper because then you can't set scrollLeft, thus tab scrolling doesn't work.

Rollback part of [27031] and instead fix !TabContainer sizing when initial child is added.   It was calculating the height of the !TabController when the single tab was marked as unselected, rather than selected.   This was inaccurate because in claro selected tabs are taller.

Refs #14164 !strict.

Modified: dijit/trunk/layout/StackController.js
==============================================================================
--- dijit/trunk/layout/StackController.js	(original)
+++ dijit/trunk/layout/StackController.js	Wed Nov 16 02:47:19 2011
@@ -174,11 +174,14 @@
 			this.addChild(button, insertIndex);
 			this.pane2button[page.id] = button;
 			page.controlButton = button;	// this value might be overwritten if two tabs point to same container
-			if(!this._currentChild){ // put the first child into the tab order
-				button.focusNode.setAttribute("tabIndex", "0");
-				button.focusNode.setAttribute("aria-selected", "true");
-				this._currentChild = page;
+			if(!this._currentChild){
+				// If this is the first child then StackContainer will soon publish that it's selected,
+				// but before that StackContainer calls layout(), and before layout() is called the
+				// StackController needs to have the proper height... which means that the button needs
+				// to be marked as selected now.   See test_TabContainer_CSS.html for test.
+				this.onSelectChild(page);
 			}
+
 			// make sure all tabs have the same length
 			if(!this.isLeftToRight() && has("ie") && this._rectifyRtlTabList){
 				this._rectifyRtlTabList();

Modified: dijit/trunk/tests/layout/StackContainer.html
==============================================================================
--- dijit/trunk/tests/layout/StackContainer.html	(original)
+++ dijit/trunk/tests/layout/StackContainer.html	Wed Nov 16 02:47:19 2011
@@ -193,6 +193,7 @@
 				});
 				var resizes = 0;
 				dojo.connect(child1, "resize", function(){
+					debugger;
 					resizes++;
 				});
 				container.addChild(child1);

Modified: dijit/trunk/themes/dijit.css
==============================================================================
--- dijit/trunk/themes/dijit.css	(original)
+++ dijit/trunk/themes/dijit.css	Wed Nov 16 02:47:19 2011
@@ -1311,38 +1311,35 @@
 	width: 100%;	/* otherwise ScrollingTabController goes to 50K pixels wide */
 }
 
-.dijitTabController {
-    /* make sure line separating tabs from content is visible */
+.dijitTabContainerBottom-tabs,
+.dijitTabContainerTop-tabs,
+.dijitTabContainerLeft-tabs,
+.dijitTabContainerRight-tabs {
     z-index: 1;
-	overflow: visible !important;  /* so selected tab can cover up border adjacent to container */
+	overflow: visible !important;  /* so tabs can cover up border adjacent to container */
 }
-.dijitTabListWrapper {
-    /* make sure line separating tabs from content is visible */
+
+.dijitTabController {
     z-index: 1;
 }
-.dijitTabContainerTopStrip, .dijitTabContainerBottomStrip {
-    /* If selected tab if halfway scrolled out of view, avoid it appearing behind scroll & menu buttons.
-       Avoid setting overflow-x: hidden on left/right tabs; it would prevent the selected tab from covering
-       the border between tab buttons and content.
-    */
-    overflow-x: hidden;
+.dijitTabContainerBottom-container,
+.dijitTabContainerTop-container,
+.dijitTabContainerLeft-container,
+.dijitTabContainerRight-container {
+	z-index:0;
+	overflow: hidden;
+	border: 1px solid black;
 }
 .nowrapTabStrip {
-    /* make sure line separating tabs from content is visible */
-    z-index: 1;
-	overflow: visible !important;  /* so selected tab can cover up border adjacent to container */
-
-    width: 50000px;
-    display: block;
-    position: relative;
+	width: 50000px;
+	display: block;
+	position: relative;
     text-align: left;  /* just in case ancestor has non-standard setting */
+    z-index: 1;
 }
-
-.dijitTabPaneWrapper {
-    /* Holds each pane (ContentPane, etc.).   Sibling of .dijitTabListWrapper */
-	z-index:0;
+.dijitTabListWrapper {
 	overflow: hidden;
-	border: 1px solid black;
+    z-index: 1;
 }
 
 .dijit_a11y .tabStripButton img {
@@ -1599,9 +1596,7 @@
 }
 
 /* Slider */
-.dijitSlider {
-    z-index: 0; /* so z-index settings below have no effect outside of the Slider */
-}
+
 .dijitSliderMoveable {
 	z-index:99;
 	position:absolute !important;