[Dojo-interest] Re: Help with Tree Widget CSS

Tue Jan 9 18:36:42 MST 2007

After a little more experimentation, I believe this may be a bug with the
Dojo Dialog or Tree widget in IE 7.

The HTML for a simple test page is shown below - load this into Firefox and
it works fine. Load it into IE 7 and the tree has both horizontal and
vertical scroll bars.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>Authenticity Service Test</title>

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

  <script type="text/javascript">
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
    dojo.require("dojo.widget.TreeRPCController");
    dojo.require("dojo.widget.TreeSelector");
    dojo.require("dojo.widget.TreeNode");
    dojo.require("dojo.widget.TreeContextMenu");
    dojo.require("dojo.widget.Dialog");
    dojo.require("dojo.lfx.*");
  </script>

<style type="text/css">
  .dojoDialog {
        background : #fff;
        border : 1px solid #999;
        -moz-border-radius : 5px;
        padding : 4px;
        overlow: display;
    }
</style>

</head>
<body>
<form id="testForm">
  <input type="submit" onclick="test(); return false;"; value="Test" />
</form>

<div dojoType="dialog" id="resultsDialog" bgColor="black" bgOpacity="0.3"
        toggle="fade" toggleDuration="250">
    <div style="background: white">
        <div id="resultsMsgDiv"></div>
        <div dojoType="Tree" widgetId="resultsTree" style="overflow:
display">
          <div dojoType="TreeNode" title="Node 1" widgetId="node1"
isFolder="true">
              <div dojoType="TreeNode" title="Node 1a"
widgetId="node1a"></div>
              <div dojoType="TreeNode" title="Node 1b"
widgetId="node1b"></div>
              <div dojoType="TreeNode" title="Node 1c"
widgetId="node1c"></div>
          </div>
          <div dojoType="TreeNode" title="Node 2" widgetId="node2"
isFolder="true">
              <div dojoType="TreeNode" title="Node 2a"
widgetId="node2a"></div>
              <div dojoType="TreeNode" title="Node 2b"
widgetId="node2b"></div>
              <div dojoType="TreeNode" title="Node 2c"
widgetId="node2c"></div>
          </div>
        </div>
        <br />
        <center><input type="button" id="okButton" value="OK"></center>
    </div>
</div>

<script type="text/javascript">
  function test() {
          document.getElementById("resultsMsgDiv").innerHTML =
              "This is some results msg";

          var dialog = dojo.widget.byId("resultsDialog");

        dialog.setCloseControl(document.getElementById("okButton"));

        dialog.show();
   }
</script>

</body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://dojotoolkit.org/pipermail/dojo-interest/attachments/20070109/884b1776/attachment.html