Struggling with styling, I am attempting to create a tree view in AngularJS. Currently, I am facing an issue aligning vertical and horizontal lines for the tree items.
Check out my Codepen for reference.
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Drag and drop angular tree</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<style>
div[data-tree-model] ul {
margin: 0;
list-style: none;
border: none;
overflow: hidden;
position: relative;
list-style: none;
padding-left: 12px;
}
div[data-tree-model] li {
position: relative;
padding: 0 0 0 0px;
line-height: 20px;
position: relative;
}
div[data-tree-model] li .expanded {
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
background-repeat: no-repeat;
}
div[data-tree-model] li .collapsed {
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
background-repeat: no-repeat;
}
div[data-tree-model] li .normal {
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
background-repeat: no-repeat;
}
div[data-tree-model] li i, div[data-tree-model] li span {
cursor: pointer;
}
div[data-tree-model] li .selected {
background-color: #aaddff;
font-weight: bold;
padding: 1px 5px;
}
div[data-tree-model] li::before, div[data-tree-model] li::after {
content: "";
position: absolute;
left: -12px;
}
div[data-tree-model] li::before {
border-top: 2px solid black;
top: 9px;
width: 4px;
height: 0;
padding-left: 4px;
margin-left: 6px;
}
div[data-tree-model] li::after {
border-left: 2px solid black;
height: 100%;
width: 0px;
top: 0px;
margin-left: 5px;
}
div[data-tree-model] ul > li:last-child::after {
height: 8px;
}
div[data-tree-model] li:fisrt-child::after {
height: 0px;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<!-- <div>{{roleList}}</div></br> -->
<div class="clt"
data-angular-treeview="true"
data-tree-id="mytree"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children" >
</div>
</div>
</div>
</body>
<script>
(function(){
//angular module
var myApp = angular.module('myApp', ['angularTreeview', 'ui.sortable']);
//test controller
myApp.controller('myController', function($scope){
//test tree model 1
$scope.roleList1 = [
{ "roleName" : "User", "roleId" : "role1", "children" : [
{ "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
{ "roleName" : "subUser2", "roleId" : "role12", "children" : [
{ "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
{ "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
...
</script>
</html>
Seeking assistance in aligning vertical lines of the tree view correctly. Need them to touch the folder open-close images and corners accurately. Also aiming for an open end at the first child node. Similar to this example:
https://i.sstatic.net/u5TaZ.png
If you have any suggestions or solutions to achieve this design, your input would be greatly appreciated. Thank you!