jquery - Dynatree によるフォルダーのラッピング

Question

Web サイトに dynatree 1.2.4 をインストールして、電子メール アーカイブ ソリューションから一連のフォルダーを表示しました。フォルダーは AJAX 経由で取得され、dynatree コードが呼び出される前にフォーマットされます。

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>");  
}

この関数processFolderは、ターゲットの順序なしリストにリスト項目を追加し、サブフォルダー用に別の順序なしリストを作成します。 processFoldersその後、サブフォルダーを処理するために再度呼び出されます。

これはjsonオブジェクトの一部です

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

folder_list div の CSS は次のとおりです。

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

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

フォルダは Chrome では美しくレンダリングされますが、IE では比較的長い名前のフォルダは次の行に折り返されます。

左側の画像は IE で表示されているものを示していますが、右側のスクリーンショットは Chrome を示しています。

        

white-space:nowrapまた、folder_list divのリスト項目に追加しようとしました

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

誰かが IE でこの動作を見たことがありますか? 問題を解決するために何をしましたか?

Answer 1

私はついに答えを見つけました。これを CSS ファイルに追加する必要がありました。

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

この問題を解決する最大の鍵は、ディスプレイのピースにあると思われました。

Answer 2

幅を広げてから試してください

#folder_list 
{
  width:180px; 
}