I'm attempting to incorporate the style of the ACE Admin theme into the angular-tree-component.
Currently, my tree looks like this:
https://i.sstatic.net/ktiEf.png
However, I desire to apply styles from the Angular tree guide in order to achieve a tree like this:
https://i.sstatic.net/60RPu.png
The process can be accomplished by following The Angular tree guide. The guide suggests that if you want a tree with plus and minus signs using the ACE Admin theme, then:
Wrap your tree with a class, add your custom styles to your style.scss file, and ensure all custom rules are under your custom class - that's it!
To adhere to this guidance, I have established a .ace style (Wrapping your tree with a class, as per the guide):
.ace { }
Subsequently, I placed all elements of the ACE Admin theme style inside the .ace class (
Including all custom rules under your custom class.ace div.tree {
padding-left: 0;
margin-left: -5px
}
...
and applied it to my tree:
<tree-root
[ngClass]="'ace'"
[nodes]="nodes"
[options]="options"
></tree-root>
While it seems straightforward, I am unable to implement the Ace Admin Style. Apologies for my limited CSS knowledge.
To demonstrate what I've done so far, I've created a plunker. Although the basic styling is in place, the ACE Admin theme remains unapplied.
What could I be overlooking?