如何设置 p-tree 的宽度以填充可用空间？

Posted 2023-03-06

【中文标题】如何设置 p-tree 的宽度以填充可用空间？

【英文标题】：how do I set the width of p-tree to fill the available space?

【发布时间】：2020-03-09 07:27:25

【问题描述】：

我无法正确设置宽度来填充p-treeprimeng 控件的可用空间。 当我手动执行此操作时，它在 chrome devtools 中有效，但当我在组件的样式文件中执行此操作时无效。

Stackblitz 链接：

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

无论如何，树都会保持 18em 的宽度。 提前谢谢你。

html代码：

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

css代码：

.ui-tree 
  width: 100%;

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

【参考方案1】：

可以使用p-tree控件的styleClass属性。

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

在 tree.scss 文件中添加下面的 css。

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

这里是stackblitz

【讨论】：

是的，:host ::ng-deep .ui-tree 是 scss 中的正确类。你就是男人！