Question

我的程序逻辑工作正常，但我无法弄清楚如何让关键组件将其大小调整到屏幕的可用高度。例如，我有：

            <p:layout id="workLayout" style="margin-top: 5px; height: 95%">

                <p:layoutUnit position="west"
                              resizable="true"
                              minSize="50"
                              size="200">

                    <h:form id="treeForm">
                        <p:tree value="#{workspace.listTree}"
                                var="node"
                                >
                            <p:treeNode>
                                <h:outputText value="#{node.name}" />
                            </p:treeNode>
                        </p:tree>
                    </h:form>

                </p:layoutUnit>

它会产生大约200px的布局高度。（CSS高度项无效）。只要在树中展开几个节点，就必须开始垂直滚动，同时在p：布局空间下面会有大量浪费的空白。

有关如何执行此操作的任何提示？

更新：我发现如果我输入这样的绝对高度，我可以接近我想要的效果：

<p:layout id="workLayout" style="margin-top: 5px; height: 6in">

似乎高度值取决于某些外部容器。但是，如果是这种情况，为什么当我更改浏览器窗口的水平大小时，对象能够自行调整大小？我想要的是它也能回应垂直尺寸。

Answer 1

在Primefaces 3.5 中，p:tree的CSS以

开头

.ui-tree {
width: 300px;
position: relative;
}
.ui-tree .ui-tree-container {
margin: 0;
padding: 3px;
white-space: nowrap;
overflow: auto;
}

我会使用style属性添加CSS属性使用需求：height:100%：<p:tree style="height:100%"/>。

在更改代码之前，请使用Chrome或Firefox的开发者工具将此样式添加到树中，以确保其有效！

Answer 2

在使用PrimeNg p-tree控件的组件代码中，我使用输入字符串变量并将其分配给ui-tree类高度。然后，您可以将其设置为像素或百分比高度：

import { Component, OnInit, Input, Renderer2, ElementRef} from '@angular/core 

export class PersonnelTreeComponent implements OnInit {

        @Input() height: string;
        treeheight: string = '400px';  

        constructor( private renderer: Renderer2, private elRef: ElementRef) { } 

        ngOnInit() { 
            if (this.height != null) {
                this.treeheight = this.height;
            }  
        }  

        ngAfterViewInit() {
            this.renderer.setStyle(this.elRef.nativeElement.querySelector('.ui-tree'), 'height', this.treeheight );  
        } 
    }

然后以通常的方式设置它：

<personneltree-component  [height]="'100%'"></personneltree-component>

调整p：树以使用可用高度

2 个答案: