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级时无法正确显示

回答

相关问题