I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example.
When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using an AngularJS recursive directive to generate this list, which can vary in depth.
If you check out what I have so far, you'll see that I haven't been able to find a solution yet.
This is how my CSS looks:
div[data-tree-model] li span:hover {
background-color: #D7D7D7;
border: 1px solid #A2A3A6;
display: block;
}
div[data-angular-treeview] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
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%;
}
Here is the template for the directive:
//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>';