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

Tue Jan 9 22:11:57 MST 2007

As some else stated the overflow is the key, you over wrote the style which
is causing you the problem. I use this in my code all the time and do not
experience the problem you have, yet if I use the style that you override
then the problem exists.

Andrew Scott
Senior Coldfusion Developer
Aegeon Pty. Ltd.
www.aegeon.com.au
Phone: +613  8676 4223
Mobile: 0404 998 273

  _____  

From: dojo-interest-bounces at dojotoolkit.org
[mailto:dojo-interest-bounces at dojotoolkit.org] On Behalf Of Sean
Sent: Wednesday, 10 January 2007 12:37 PM
To: dojo-interest at dojotoolkit.org; robert.coup at onetrackmind.co.nz
Subject: [Dojo-interest] Re: Help with Tree Widget CSS

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/405987db/attachment-0001.html