how do I set the width of p-tree to fill the available space?

Question

I cannot properly set the width to fill the available space for a p-tree primeng control. It works in chrome devtools when I do it manually but doesn't when I do it in the style file of my component.

Stackblitz link:

https://stackblitz.com/edit/angular6-primeng-gjz1po

The tree will stay 18em of width no matter what. Thank you in advance.

The html code:

<p-tree [value]=filesTree1></p-tree>

The css code:

.ui-tree {
  width: 100%;
}

Answer 1

You can use styleClass property of p-tree control.

<p-tree [value]=filesTree1 [styleClass]="'my-tree'"></p-tree>

Add below css in tree.scss file.

:host ::ng-deep .ui-tree.my-tree {
  width: 100%;
}

Here is stackblitz