Ticket #5389 (closed defect: fixed)

Opened 13 months ago

Last modified 13 months ago

dojox.layout.ScrollPane fails with Internet Explorer. Here is a patch.

Reported by: guest Owned by: dante
Priority: normal Milestone: 1.1
Component: Dojox Version: 1.0
Severity: normal Keywords:
Cc: daniel.carrera@…

Description

The problem occurred in IE when building dojox.layout.ScrollPane programmatically. For reference, I include my sources at the end of this post.

Symptoms: ScrollPane didn't scroll.

Cause: ScrollWrapper had the wrong size, it was too big. It was taking the size of its child object (ScrollPane) instead of its parent object (ScrollWindow).

Solution: 

dojox/layout/ScrollPane.js line 44:
- dojo.style(this.wrapper,this._dir,this.domNode.style[this._dir]);
-   this._lo = dojo.coords(this.wrapper,true);
+ dojo.style(this.wrapper,this._dir,this.domNode.style[this._dir]);
+   dojo.style(this.wrapper,"width","100%");
+   this._lo = dojo.coords(this.wrapper,true);

PS: This is how I'm building the ScrollPane (summarized). I do it this way because I need to put a StackController inside it. 

// top_div is a Dom object that is already defined.
var scroll = new dojox.layout.ScrollPane({orientation:"horizontal"});
top_div.appendChild(scroll.domNode);
	
var stack_div = document.createElement("div");
stack_div.id = "Foo";
top_div.appendChild(stack_div);

// Make the StackController.
var container = document.createElement("div");
container.style.width = containerWidth(criteria); // Function defined earlier.
dojo.query(".dojoxScrollPane", scroll.domNode)[0].appendChild(container);
var controller = new dijit.layout.StackController({
	containerId:stack_div.id
});
container.appendChild(controller.domNode);
controller.startup();
scroll.startup();

Change History

Changed 13 months ago by peller

  • owner changed from peller to dante

Changed 13 months ago by dante

  • status changed from new to assigned
  • milestone changed from 1.0.2 to 1.1

bumping to 1.1 because it's dojox.

also, would you mind to attach a test case to test this (or a modified verion of the one in trunk) displaying this behavior. i'm hesitant to just add 100% width styling to something (especially in code) when the same can be applied with css.

Changed 13 months ago by guest

How about adding a ScrollPane.css with: 

.dojoxScrollWrapper { width: 100%; }

I just checked, and this works. Below is a test case. I wish it didn't use dijit.StackContainer but I don't yet know of any other way to reproduce the bug.

As shown, the test page ScrollPane doesn't work in IE. If you remove the comments around "width: 100%" in the CSS, ScrollPane works perfectly: 

<html>
<head>
    <style type="text/css">
        @import "dojo-1.0/dijit/themes/tundra/tundra.css";
        @import "dojo-1.0/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="dojo-1.0/dojo/dojo.js"
                djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.StackContainer");
        dojo.require("dojox.layout.ScrollPane");
    </script>
    <style type="text/css">
    #TopContainer {
        width: 700px;
        border: 3px solid #777;
    }
    .dojoxScrollWindow { border: 1px solid #aaa; }
    .dojoxScrollWrapper { /*width: 100%;*/ }
    </style>
</head>
<body class="tundra" style="padding: 10px;">
<div id='TopContainer' dojoType="dijit.layout.ContentPane"></div>

<script type="text/javascript">
dojo.addOnLoad(function() {
    // Create top-level divs.
    var top_div = dojo.byId('TopContainer');
	
    var scroll = new dojox.layout.ScrollPane({orientation:"horizontal"});
    top_div.appendChild(scroll.domNode);
	
    var stack_div = document.createElement("div");
    stack_div.id = "Foo";
    top_div.appendChild(stack_div);
	
    // Controller
    var container = document.createElement("div");
    container.style.width = "1400px";
    dojo.query(".dojoxScrollPane", scroll.domNode)[0].appendChild(container);
    var controller = new dijit.layout.StackController({
            containerId:stack_div.id
    });
    container.appendChild(controller.domNode);
    controller.startup();
    scroll.startup();
	
    // Create the stack
    var stack = new dijit.layout.StackContainer({}, stack_div);
    for (var i=0; i<40; i++) {
        var pane = new dijit.layout.ContentPane({ title: "Title "+i });
        pane.setContent("Content "+i);
        stack.addChild(pane);
        pane.startup();
    };
    stack.startup();
});
</script>
</body>
</html>

Changed 13 months ago by dante

  • status changed from assigned to closed
  • resolution set to fixed

(In [11824]) static stylesheet with addition fixes #5389

Note: See TracTickets for help on using tickets.