I am trying to apply ACE Admin theme style to angular-tree-ponent.

Now my tree looks like this:

However, I would like to apply styles from the guide to make a tree like this:

So it can be achieved through The Angular tree guide. The Angular tree guide says, if you want to make a tree with plus and minus(ACE Admin theme) then:

Surround your tree with a class, and add your custom style to your style.scss file. Scope all the custom rules under your custom class - and that's it!

So I've created .ace style (Surround your tree with a class like guide says):

.ace { }

Then I put all elements of style ACE Admin theme inside of .ace class(Scope all the custom rules under your custom class like guide says):

.ace div.tree {
     padding-left: 0;
     margin-left: -5px
}
...

and my tree:

 <tree-root 
  [ngClass]="'ace'"
  [nodes]="nodes"
  [options]="options"
></tree-root>

I think it should be really simple, however I cannot apply the Ace Admin Style. Sorry about the lack of basic CSS understanding.

I've created a plunker to show what I have. The basic style is applied, however ACE Admin theme is not applied.

What am I doing wrong?

I am trying to apply ACE Admin theme style to angular-tree-ponent.

Now my tree looks like this:

However, I would like to apply styles from the guide to make a tree like this:

So it can be achieved through The Angular tree guide. The Angular tree guide says, if you want to make a tree with plus and minus(ACE Admin theme) then:

Surround your tree with a class, and add your custom style to your style.scss file. Scope all the custom rules under your custom class - and that's it!

So I've created .ace style (Surround your tree with a class like guide says):

.ace { }

Then I put all elements of style ACE Admin theme inside of .ace class(Scope all the custom rules under your custom class like guide says):

.ace div.tree {
     padding-left: 0;
     margin-left: -5px
}
...

and my tree:

 <tree-root 
  [ngClass]="'ace'"
  [nodes]="nodes"
  [options]="options"
></tree-root>

I think it should be really simple, however I cannot apply the Ace Admin Style. Sorry about the lack of basic CSS understanding.

I've created a plunker to show what I have. The basic style is applied, however ACE Admin theme is not applied.

What am I doing wrong?

• javascript
• html
• css
• angular
• treeview

Share Improve this question Follow edited Mar 8, 2018 at 11:57 StepUp asked Mar 7, 2018 at 21:44 StepUpStepUp 38.3k1616 gold badges9292 silver badges157157 bronze badges 5

• Where did you put your CSS (ie: the .ace div.tree part)? I would try to look at the page when loaded in the browser and see where your custom div.tree is. If it's not there, your custom CSS is not loaded. If it's there, see if some things were added (ie: ng-content stuff). If you see the ng-content stuff, it means you didn't put your CSS in a global file, so Angular is doing encapsulation – Kevin Doyon Commented Mar 7, 2018 at 22:13
• When I looked at your plnkr, I see your styling actually applies to the markup. You can check by deleting <link rel="stylesheet" href="style.css" /> line. I think .ace div.tree does not apply to anything. When I inspected the DOM, I did not see any element with .tree class. – Bunyamin Coskuner Commented Mar 8, 2018 at 6:08
• @Kevin I've put .ace div .tree part into styles.css file. The Ace Admin Style starts after creating class .ace {}. Please, see my plunker. plnkr.co/edit/azLsD1?p=preview – StepUp Commented Mar 8, 2018 at 8:38
• @BunyaminCoskuner so you mean that I've incorrectly overridden style? What can I do? Thanks in advance. – StepUp Commented Mar 8, 2018 at 8:41
• You can find out which classes you need to target either by documentation or looking at the rendered DOM itself – Bunyamin Coskuner Commented Mar 8, 2018 at 10:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It is necessary to add class expand-tree to all tree and add specific style div.angular-tree-ponent.

Click to see a work example at plunker.

The whole style looks like this:

.expand-tree .tree-children.tree-children-no-padding { padding-left: 0 }
.expand-tree .tree-children { padding-left: 20px; overflow: hidden }
.expand-tree .node-drop-slot { display: block; height: 2px }
.expand-tree .node-drop-slot.is-dragging-over { background: #ddffee; height: 20px; border: 2px dotted #888; }
.expand-tree .toggle-children-wrapper-expanded .toggle-children { transform: rotate(90deg) }
.expand-tree .toggle-children-wrapper-collapsed .toggle-children { transform: rotate(0); }
.expand-tree .toggle-children-wrapper {
  padding: 2px 3px 5px 1px;
}
/* tslint:disable */
.expand-tree .toggle-children {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
  height: 8px;
  width: 9px;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 1px;
  background-repeat: no-repeat;
  background-position: center;
}
.expand-tree .toggle-children-placeholder {
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;
  top: 1px;
  padding-right: 3px;
}
.expand-tree .node-content-wrapper {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 2px;
  transition: background-color .15s,box-shadow .15s;
}
.expand-tree .node-wrapper {display: flex; align-items: flex-start;}
.expand-tree .node-content-wrapper-active,
.expand-tree .node-content-wrapper.node-content-wrapper-active:hover,
.expand-tree .node-content-wrapper-active.node-content-wrapper-focused {
  background: #beebff;
}
.expand-tree .node-content-wrapper-focused { background: #e7f4f9 }
.expand-tree .node-content-wrapper:hover { background: #f7fbff }
.expand-tree .node-content-wrapper-active, .node-content-wrapper-focused, .node-content-wrapper:hover {
  box-shadow: inset 0 0 1px #999;
}
.expand-tree .node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }
.expand-tree .node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }

.expand-tree tree-viewport {
  height: 100%;
  overflow: auto;
  display: block;
}
.expand-tree .tree-children { padding-left: 20px }
.expand-tree .empty-tree-drop-slot .node-drop-slot { height: 20px; min-width: 100px }
.expand-tree .angular-tree-ponent {
  width: 100%;
  position:relative;
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently not supported by any browser */
}

tree-root .angular-tree-ponent-rtl {
  direction: rtl;
}
tree-root .angular-tree-ponent-rtl .toggle-children-wrapper-collapsed .toggle-children {
  transform: rotate(180deg) !important;
}
tree-root .angular-tree-ponent-rtl .tree-children {
  padding-right: 20px;
  padding-left: 0;
}

li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

.expand-tree div.angular-tree-ponent div.tree-children::before,
.expand-tree div.angular-tree-ponent::before {
  content: "";
  position: absolute;
  border-left: 1px dotted #23527c;
  height: 100%;
  top: -10px;
  left: 6px
}

.expand-tree div.angular-tree-ponent {
  padding: 0;
  margin: 0;
}

.expand-tree div.angular-tree-ponent div.tree-children {
  position: relative;
  padding-left: 0;
  margin-left: 16px
}

.expand-tree div.angular-tree-ponent div.tree-children::before {
  left: 5px
}

.expand-tree .node-drop-slot {height:2px;}

.expand-tree div.angular-tree-ponent tree-node>div>.node-wrapper {
  margin-left: 24px
}

.expand-tree div.angular-tree-ponent tree-node>div>.node-wrapper>.node-content-wrapper {
  margin-left: 4px
}

.expand-tree div.angular-tree-ponent tree-node>div.tree-node-leaf .node-wrapper {
  margin-left: 0;
  position: relative;
}

.expand-tree div.angular-tree-ponent tree-node>div::before {
  content: "";
  position: absolute;
  border-bottom: 1px dotted #23527c;
  width: 7px;
  margin-top: 12px;
  left: 6px
}

.expand-tree div.angular-tree-ponent tree-node>div .toggle-children-wrapper {
  width: 13px;
  height: 13px;
  border: 1px solid #23527c;
  position: relative;
  margin-top: 5px;
  margin-left: 14px;
  display: inline-block;
  background-color: #fff;
  z-index: 1
}

.expand-tree div.angular-tree-ponent tree-node>div .toggle-children-wrapper::before {
  content: "";
  display: inline-block;
  width: 7px;
  border-top: 1px solid #23527c;
  position: absolute;
  top: 5px;
  left: 2px
}

.expand-tree div.angular-tree-ponent tree-node>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
  content: "";
  display: inline-block;
  height: 7px;
  border-left: 1px solid #23527c;
  position: absolute;
  top: 2px;
  left: 5px
}

.expand-tree div.angular-tree-ponent tree-node>div .toggle-children-wrapper .toggle-children {
  display: none
}

.expand-tree div.angular-tree-ponent tree-node>div .node-content-wrapper {
  margin: 0;
  padding: 0 0 0 4px;
  box-shadow: none;
  background: none;
}

.expand-tree div.angular-tree-ponent>tree-node>div::before {
  left: 14px
}

and tree root:

<tree-root 
  [ngClass]="expand-tree"
  [nodes]="nodes"
  [options]="options"
></tree-root>