abn樹到達第9級時無法正確顯示

我必須生成樹視圖，所以我在我的spring boot jhipster應用程序中使用abn-tree創建了樹。abn樹到達第9級時無法正確顯示

由於樹會在運行時生成，並且樹的級別（深度）不固定。我嘗試了abn-tree的深度8，但是當它進入第9級時，它的視野分散了。向右側移動並且整個樹視圖顯示不正確後添加節點。

我需要樹狀結構Windows註冊表編輯器：通過將數據在app.js http://embed.plnkr.co/Nxi2Nl/：

您可以查看問題

var app = angular.module('plunker', ['angularBootstrapNavTree']); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    var treedata_geography = [{ 
    label: 'North America', 
    children: [{ 
     label: 'Canada', 
     children: [{ 
     label: 'Canada', 
     children: [{ 
     label: 'Canada', 
     children: [{ 
     label: 'Canada', 
    children: [{ 
     label: 'Canada', 
    children: [{ 
     label: 'Canada', 
    children: [{ 
     label: 'Canada', 
     children: [{ 
     label: 'Canada', 
     children: [{ 
     label: 'Canada', 
     children: [{ 
     label: 'Canada', 
     children: ['Toronto', 'Vancouver'] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
     label: 'USA', 
     children: ['New York', 'Los Angeles'] 
    }, { 
     label: 'Mexico', 
     children: ['Mexico City', 'Guadalajara'] 
    }] 
    }, { 
    label: 'South America', 
    children: [{ 
     label: 'Venezuela', 
     children: ['Caracas', 'Maracaibo'] 
    }, { 
     label: 'Brazil', 
     children: ['Sao Paulo', 'Rio de Janeiro'] 
    }, { 
     label: 'Argentina', 
     children: ['Buenos Aires', 'Cordoba'] 
    }] 
    }]; 
    $scope.my_data = treedata_geography; 

});

我該如何解決這個問題。我嘗試過各種CSS變化。如果這不能解決問題，那麼最好在運行時使用展開摺疊功能來生成樹。

來源

2016-12-16 Neelam Sharma

看看.css文件（你沒有包括在你的問題中，但你應該把相關的代碼放在那裏）。

您會看到，只有9個級別的縮進是爲列表項目定義的，因此在九個級別後，它們會回退到左邊距。在CSS中的最後一個級別是：

ul.nav.nav-list.abn-tree .level-9 .indented { 
    position: relative; 
    left: 160px; 
}

根據需要只需添加更多的層次和縮進各20個像素更多：

ul.nav.nav-list.abn-tree .level-10 .indented { 
    position: relative; 
    left: 180px; 
} 

ul.nav.nav-list.abn-tree .level-11 .indented { 
    position: relative; 
    left: 200px; 
}

等等，等等

來源

2016-12-16 06:47:05

謝謝，它的工作！ –

abn樹到達第9級時無法正確顯示

回答

相關問題