I tried to implement angular tree control from http://wix.github.io/angular-tree-control, however, i cannot highlight the whole cell, it's only highlighting the label. I tried to change the css that the treecontrol comes with but still i can't make it highlight the whole cell.
the current and expected result is here:
treecontrol { font-family: Verdana, Helvetica, Arial, sans-serif; font-size:13px; color: #555; text-decoration: none; } treecontrol ul { margin: 0; padding: 0; list-style: none; border: none; overflow: hidden; } treecontrol li { position: relative; padding: 0 0 0 20px; line-height: 20px; ul { padding-left: 16px; } .tree-label { cursor: pointer; display: inline; &:focus { outline: none; } &:hover { outline: none; background-color: yellow; } } .tree-selected { background-color: yellow; } &.tree-expanded { > div { > .tree-icon-expand { display: none; } > .tree-icon-collapse { display: inline; } } } } treecontrol li.tree-expanded i.tree-leaf-head, treecontrol li.tree-collapsed i.tree-leaf-head {display:none;} treecontrol li.tree-expanded i.tree-branch-head, treecontrol li.tree-collapsed i.tree-branch-head {display:inline;} treecontrol li.tree-leaf i.tree-branch-head {display:none;} treecontrol li.tree-leaf i.tree-leaf-head {display:inline;} treecontrol li i.tree-branch-head { cursor: pointer; } treecontrol li.tree-expanded i.tree-branch-head { padding: 1px 10px; background: url("../images/node-opened-light.png") no-repeat; } treecontrol li.tree-collapsed i.tree-branch-head { padding: 1px 10px; background: url("../images/node-closed-light.png") no-repeat; } treecontrol li.tree-leaf i.tree-leaf-head { padding: 1px 10px; width: 16px; height: 16px; background: none no-repeat; } 1 Answers
Answers 1
You have an example in the same page that you linked
Your javascript would be
function CustomCss($scope) { $scope.treedata=createSubTree(3, 4, ""); $scope.opts = { injectClasses: { "liSelected": "c-liSelected", } }; } And your CSS
.c-liSelected {background-color: yellow} 
0 comments:
Post a Comment