CODEWITHSUNDEEP
javascriptangularjscss
Ali
Ali

Reputation: 558

angular-tree-control remove overall padding

I want to remove the padding on the left:

enter image description here

and have it like so:

enter image description here

But when I try to apply the following :

[treecontrol] li {
    padding: 0;
}

It sets the padding of the children to 0px too:

enter image description here

Is it possible to achieve desired result?

Upvotes: 1

Views: 273

Answers (2)

GProst
GProst

Reputation: 10227

There are some options in documentation, which will allow you to specify classes on different kind of elements in the tree:

injectClasses : allows to inject additional CSS classes into the tree DOM
    ul : inject classes into the ul elements
    li : inject classes into the li elements
    liSelected : inject classes into the li
    elements only when the node is selected
    iExpanded : inject classes into the 'i' element for the expanded nodes
    iCollapsed : inject classes into the 'i' element for the collapsed nodes
    iLeaf : inject classes into the 'i' element for leaf nodes
    label : inhject classes into the div element around the label
    labelSelected : inject classes into the div element around the label only when the node is selected

And you can use your class on treecontrol directive element to combine it with inner classes in css rules:

<treecontrol class="tree-classic" ... ></treecontrol>

Upvotes: 0

John
John

Reputation: 1285

You should use the greater than symbol to express immediate children. Try the following code:

treecontrol > ul > li { padding: 0; }

Upvotes: 1

Related Questions