Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#8481 closed defect (duplicate)

IE7 failure using Slider with style "position: fixed"

Reported by: Adam Peller Owned by: Douglas Hays
Priority: high Milestone: 1.3
Component: Dijit - Form Version: 1.2.3
Keywords: Cc:
Blocked By: Blocking:

Description

The following was posted as a trac report instead of a ticket. Author unknown

Clicking and sliding the slider thumb in the example below works fine in FF3 but causes a JScript error in IE7: "'_offsetParent.tagName' is null or not an object".

The problem does not occur if you remove the "position: fixed" style from widget.

It's no help to enclose the widget in a div having position:fixed.

Test case and patch below.

Test case: to repro, open this html in IE7 and click on the slider thumb. 

<!DOCTYPE HTML>

<html>
<head>
    
    <title>Slider position:fixed issue</title>
  <!--
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js" 
        djConfig = 'parseOnLoad: true, isDebug: false'></script> -->

    <script type="text/javascript" src="./js/dojo-src/dojo/dojo.js" 
        djConfig = 'parseOnLoad: true, isDebug: false'></script>

    <script type="text/javascript" src="./js/dojo-src/dijit/dijit.js"></script>

    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.2.0/dojo/resources/dojo.css";
        @import "http://o.aolcdn.com/dojo/1.2.0/dijit/themes/tundra/tundra.css";

        html, body { height: 100%; width: 100%; padding: 0; border: 0; }

    </style>
    <script type="text/javascript">  
        dojo.require("dijit.form.Slider");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dojo.parser");    
 
        function onSliderChange(val){
           console.log ('slider val', val);
        }

        dojo.addOnLoad( function () {
          for (var i=0;i< 200; i++){
            var div = document.createElement("div");
            div.innerHTML = "line " + (i+1);
            dojo.byId("spacer").appendChild(div)
          }
        });
        
    </script>


    
    
</head>
<body>
    <div dojoType="dijit.layout.BorderContainer" style="height: 2000px">
    <div dojoType="dijit.layout.ContentPane" region="center" id="spacer" style="top: 20px;">
    
    <div dojoType="dijit.form.VerticalSlider"
	  onChange="onSliderChange(arguments[0]);"
	  value="50"
	  maximum="100"
	  minimum="0"
	  discreteValues="11"
	  style="height:176px; clear:both; position: fixed; "
	  id="slider2">
	  <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;" labelStyle="right:0px;">
	    <li>0
	    <li>100
	  </ol>
	  <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;"></div>
	  <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;"></div>
	  <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
    </div> <!-- VerticalSlider -->

    </div>
    </div>

</body>
</html>

Patch to dijit/_base/scroll.js 

--- scroll-ORIG.js	2008-11-02 17:52:34.000000000 -0600
+++ scroll.js	2008-11-02 21:59:41.000000000 -0600
@@ -29,10 +29,24 @@
 		var parent = element.parentNode;
 		var offsetParent = element.offsetParent;
 		if(offsetParent == null){ // process only 1 of BODY/HTML
-			element = scrollRoot;
-			offsetParent = html;
-			parent = null;
-		}
+			// in IE7+ set the offsetParent just as FF3 does
+			// IE7 returns null for the offsetParent if the element has "position: fixed".
+			// FF3 returns the parent in  both cases
+			// see https://developer.mozilla.org/en/OffsetParent
+			// n.b. "If the element is non-positioned, the root element 
+			//   (html in standards compliant mode; body in quirks rendering mode) is the offsetParent
+			// We haven't ensured that here, but the "if" statement below filters out that case.
+			// also see http://www.w3.org/TR/CSS2/visuren.html#position-props
+			// "An element is said to be positioned if its 'position' property has a value other than 'static'."
+			if(dojo.isIE >= 7 && element.style && element.style.display != 'none' && element.style.position != 'static'){
+				offsetParent = parent;
+			} els

Change History (2)

comment:1 Changed 11 years ago by Douglas Hays

Milestone: tbd → 1.3
Resolution: → duplicate
Status: new → closed

Dup of #8011. Fixed in [15599] in 1.3.

comment:2 Changed 8 years ago by bill

Component: Dijit → Dijit - Form
Note: See TracTickets for help on using tickets.