title: Folders Wrapping with Dynatree
body: <p>I have installed dynatree 1.2.4 on my web site to display a series of folders from an email archive solution. The folders are retrieved via AJAX and then formatted before the dynatree code is called</p>
  
  <pre><code>function folders_loaded(json) {
    $("#folder_list").html("&lt;ul id=\"folder_list_ul\"&gt;&lt;/ul&gt;");
    for (folder in json.allfolders) {
      processFolder(json.allfolders[folder], "folder_list_ul")
    }
  
    $("#folder_list").dynatree({
        onActivate: function (node) {
            //do stuff here
        },
        onClick: function (node, event) {
            //do stuff here
        }
    });
  }
  function processFolder(folder, target_id) {
    //console.log(JSON.stringify(folder));
    var fid = folder.folder_id;
  
    $("#" + target_id).append("&lt;li id=\"folder_id_" + fid + "\"  class=\"folder\" data=\"folder_id: " + fid + "\"&gt;" + folder.name);
    $("#folder_id_" + folder.folder_id).append("&lt;ul id=\"folder_list_" + fid + "\"&gt;&lt;/ul&gt;")
    for(f in folder.folders) {
      processFolder(folder.folders[f],"folder_list_" + fid);
    } 
    $("#" + target_id).append("&lt;/li&gt;");  
  }
  </code></pre>
  
  <p>The function <code>processFolder</code> adds a list item to the target unordered list and then creates an another unordered list for the subfolders.  <code>processFolders</code> is then called again to process the subfolders.</p>
  
  <p>Here is a part of the json object</p>
  
  <pre><code>{
     "allfolders":{
        "Calendar":{
           "folders":{},
           "folder_id":36,
           "name":"Calendar"
        },
  
        "INBOX":{
           "folders":{
              "Archive Folders":{
                 "folders":{
                    "Emails Received 04-09-2008 to 01-09-2010 ":{
                       "folders":{ },
                       "folder_id":42,
                       "name":"Emails Received 04-09-2008 to 01-09-2010 "
                    },
                    "E-mails received 04-2005 to 05-2005":{
                       "folders":{},
                       "folder_id":43,
                       "name":"E-mails received 04-2005 to 05-2005"
                    },
                 "folder_id":41,
                 "name":"Archive Folders"
              }
           },
           "folder_id":40,
           "name":"INBOX"
        }
    }
  }
  </code></pre>
  
  <p>The CSS for the folder_list div is as follows</p>
  
  <pre><code>#folder_list 
  {
    position:absolute;
    top:0;
    left:0;
    width:150px;
  
    height:100%;
    z-index:10;
    white-space:nowrap;
  }
  </code></pre>
  
  <p>The folders render beautifully in Chrome, but with IE, folders with relatively long names wrap to the next line.</p>
  
  <p>The image on the left shows what I see in IE, while the screenshot on the right shows Chrome. </p>
  
  <p><img src="https://i.stack.imgur.com/EY4yA.png" alt="This is the screenshot from IE"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <img src="https://i.stack.imgur.com/L6Rd7.png" alt="This is the screenshot from Chrome"></p>
  
  <p>I've also tried adding <code>white-space:nowrap</code> to the list items in the folder_list div</p>
  
  <pre><code>#folder_list, #folder_list li
  {
    white-space:nowrap;
  }
  </code></pre>
  
  <p>Has anyone seen this behavior in IE and what did you do to fix the problem?</p>