Folders Wrapping with Dynatree

Question

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

function folders_loaded(json) {
  $("#folder_list").html("<ul id=\"folder_list_ul\"></ul>");
  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("<li id=\"folder_id_" + fid + "\"  class=\"folder\" data=\"folder_id: " + fid + "\">" + folder.name);
  $("#folder_id_" + folder.folder_id).append("<ul id=\"folder_list_" + fid + "\"></ul>")
  for(f in folder.folders) {
    processFolder(folder.folders[f],"folder_list_" + fid);
  } 
  $("#" + target_id).append("</li>");  
}

The function processFolder adds a list item to the target unordered list and then creates an another unordered list for the subfolders. processFolders is then called again to process the subfolders.

Here is a part of the json object

{
   "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"
      }
  }
}

The CSS for the folder_list div is as follows

#folder_list 
{
  position:absolute;
  top:0;
  left:0;
  width:150px;

  height:100%;
  z-index:10;
  white-space:nowrap;
}

The folders render beautifully in Chrome, but with IE, folders with relatively long names wrap to the next line.

The image on the left shows what I see in IE, while the screenshot on the right shows Chrome.

        

I've also tried adding white-space:nowrap to the list items in the folder_list div

#folder_list, #folder_list li
{
  white-space:nowrap;
}

Has anyone seen this behavior in IE and what did you do to fix the problem?

Answer 1

I finally found the answer. I had to add this to my CSS file.

ul.dynatree-container li>span 
{
  display:inline-block !important;
  white-space:nowrap;
}

The display piece seemed to be the biggest key to resolve the issue.

Answer 2

increase width and then try

#folder_list 
{
  width:180px; 
}