The same width of the selection box of items in nested lists
I need to make the selection box width of all nested ul li elements the same, like example ,
i.e. so when you hover over an element (the entire line must be clicked), there is no space left to the left. I am using AngularJS recursive directive to create this list (depth may vary).
This is what I have and still cannot find the answer.
My CSS:
div[data-tree-model] li span:hover {
background-color: #D7D7D7;
border: 1px solid #A2A3A6;
display: block;
}
div[data-angular-treeview] {
/* prevent user selection */
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
/* default */
font-family: Tahoma;
font-size:13px;
color: #2E9BDB;
text-decoration: none;
font-weight: bold;
}
div[data-tree-model] ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
div[data-tree-model] li {
position: relative;
padding: 0 0 0 20px;
}
div[data-tree-model] li span {
cursor: pointer;
white-space: nowrap;
border: 1px solid transparent;
display: block;
width: 100%;
}
Directive template:
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<span href="#" data-ng-class="{\'selected\': node.selected == true , \'collapsed\': node.' + nodeChildren + '.length && node.collapsed, \'expanded\': node.' + nodeChildren + '.length && !node.collapsed, \'folder\': node.' + nodeChildren + '.length}" data-ng-click="' + treeId + '.selectNodeLabel(node)" title={{node.' + nodeLabel + '}}>{{node.' + nodeLabel + '}}</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
'</li>' +
'</ul>';
+3
source to share
1 answer
If the tree view will remain 3 levels deep. Then we can do it like this . In your CSS, you need to remove the padding from the bottom:
div[data-tree-model] li {
position: relative;
//padding: 0 0 0 20px;
}
And you need to add this CSS:
div[data-angular-treeview] > ul > li > span {
padding: 0 0 0 20px;
}
div[data-angular-treeview] > ul > li > div > ul > li > span {
padding: 0 0 0 40px;
}
div[data-angular-treeview] > ul > li > div > ul > li > div > ul > li > span {
padding: 0 0 0 60px;
}
div[data-angular-treeview] > ul > li > div > ul > li > div > ul > li > div > ul > li > span {
padding: 0 0 0 80px;
}
This is a 3-level tree solution for the current HTML DOM created with your directive. :)
0
source to share