Opened 13 years ago

Closed 13 years ago

Last modified 11 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:


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.


    <title>Slider position:fixed issue</title>
    <script type="text/javascript" src="" 
        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 "";
        @import "";

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

    <script type="text/javascript">  
        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);

    <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"
	  style="height:176px; clear:both; position: fixed; "
	  <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;" labelStyle="right:0px;">
	  <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 -->



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
+			// 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
+			// "An element is said to be positioned if its 'position' property has a value other than 'static'."
+			if(dojo.isIE >= 7 && && != 'none' && != 'static'){
+				offsetParent = parent;
+			} els

Change History (2)

comment:1 Changed 13 years ago by Douglas Hays

Milestone: tbd1.3
Resolution: duplicate
Status: newclosed

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

comment:2 Changed 11 years ago by bill

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