I have a scrollpane that works in a basic page but does not work while in a dialog box. This may be a bug with the scrollpane object. I was originally trying to use the scrollpane in a accordion that was in the dialog box but that was actually generating errors.
If anyone has run across this issue and know how to fix it i would appreciate the help.
Thanks
Here is my test code.
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>Dojo ScrollPane Test</title>
<!-- Dojo Stuff starts here -->
<style type="text/css">
/*<![CDATA[*/
@import "lib/dijit/themes/tundra/tundra.css";
@import "lib/dojo/1.0/dojo/resources/dojo.css"
@import "lib/dojox/layout/resources/ScrollPane.css"
@import "lib/dijit/themes/dijit.css";
.dojoxScrollWindow {
position:relative;
}
.dojoxScrollHelper .helperInner {
visibility:hidden;
}
.dojoxScrollHelper {
-moz-border-radius:3pt;
/*border:1px solid #b7b7b7;*/
border:2px solid #333;
/*width:4px;*/
width:3px;
background:#b7cdee;
height:3px;
position:absolute;
bottom:2px;
left:4px;
}
/*]]>*/
</style>
<script type="text/javascript" src="lib/dojo/dojo.js" djconfig=
"parseOnLoad: true">
</script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dojox.layout.ScrollPane");
function eengine(){
//alert("Do Nothing");
}
//]]>
</script>
</head>
<body class="tundra">
<button dojotype="dijit.form.Button" onclick=
"dijit.byId('test_dialog').show()">Show Test Dialog</button>
<div dojotype="dijit.Dialog" id="test_dialog" title=
"Table of Contents" style=
"text-align:left;display:none;width:300px; height:320px;">
<div style="clear:both;"></div>
<div dojotype="dojox.layout.ScrollPane" orientation="vertical"
style=" height:110px; border:1px solid #b7b7b7">
<ul id="vertList">
<li><a href='Page%C2%A01'>1</a></li>
<li><a href='Page%C2%A02'>Page 2</a></li>
<li><a href='Page%C2%A03'>Another Page</a></li>
<li><a href='Page%C2%A04'>Last Page</a></li>
<li><a href='Page%C2%A05'>No, this is the last page</a></li>
<li><a href='Page%C2%A01'>1</a></li>
<li><a href='Page%C2%A02'>Page 2</a></li>
<li><a href='Page%C2%A03'>Another Page</a></li>
<li><a href='Page%C2%A04'>Last Page</a></li>
<li><a href='Page%C2%A05'>No, this is the last page</a></li>
</ul>
</div>
</div>
</body>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>Dojo ScrollPane Test</title>
<!-- Dojo Stuff starts here -->
<style type="text/css">
/*<![CDATA[*/
@import "lib/dijit/themes/tundra/tundra.css";
@import "lib/dojo/1.0/dojo/resources/dojo.css"
@import "lib/dojox/layout/resources/ScrollPane.css"
@import "lib/dijit/themes/dijit.css";
.dojoxScrollWindow {
position:relative;
}
.dojoxScrollHelper .helperInner {
visibility:hidden;
}
.dojoxScrollHelper {
-moz-border-radius:3pt;
/*border:1px solid #b7b7b7;*/
border:2px solid #333;
/*width:4px;*/
width:3px;
background:#b7cdee;
height:3px;
position:absolute;
bottom:2px;
left:4px;
}
/*]]>*/
</style>
<script type="text/javascript" src="lib/dojo/dojo.js" djconfig=
"parseOnLoad: true">
</script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dojox.layout.ScrollPane");
function eengine(){
//alert("Do Nothing");
}
//]]>
</script>
</head>
<body class="tundra">
<button dojotype="dijit.form.Button" onclick=
"dijit.byId('test_dialog').show()">Show Test Dialog</button>
<div dojotype="dijit.Dialog" id="test_dialog" title=
"Table of Contents" style=
"text-align:left;display:none;width:300px; height:320px;">
<div style="clear:both;"></div>
<div dojotype="dojox.layout.ScrollPane" orientation="vertical"
style=" height:110px; border:1px solid #b7b7b7">
<ul id="vertList">
<li><a href='Page%C2%A01'>1</a></li>
<li><a href='Page%C2%A02'>Page 2</a></li>
<li><a href='Page%C2%A03'>Another Page</a></li>
<li><a href='Page%C2%A04'>Last Page</a></li>
<li><a href='Page%C2%A05'>No, this is the last page</a></li>
<li><a href='Page%C2%A01'>1</a></li>
<li><a href='Page%C2%A02'>Page 2</a></li>
<li><a href='Page%C2%A03'>Another Page</a></li>
<li><a href='Page%C2%A04'>Last Page</a></li>
<li><a href='Page%C2%A05'>No, this is the last page</a></li>
</ul>
</div>
</div>
</body>