調整p：樹來使用可用高度

我的程序邏輯運行良好，但我無法弄清楚如何使關鍵組件調整其大小到屏幕的可用高度。例如我有：調整p：樹來使用可用高度

  <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：layout空間下面有大量浪費的空白空間。

任何提示如何做到這一點？

更新：我發現，我能得到接近我想要的效果，如果我進入一個絕對的高度是這樣的：

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

看來，一個高度值依賴於一些外部容器。但是，如果是這種情況，爲什麼當我更改瀏覽器窗口的水平大小時，對象能夠調整自身大小？我想要的是它也響應垂直尺寸。

來源

2015-07-05 AlanObject

在Primefaces 3.5的p:tree開始與

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

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

在之前更改代碼，使用Chrome或Firefox的開發人員工具將此樣式添加到樹中以確保其正常工作！

來源

2015-07-05 05:57:41

好主意，但它似乎並沒有做成。 p：tree的容器是p：layoutUnit，我必須以某種方式調整它，並讓p：tree展開以填充該空間。 – AlanObject

在我使用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>

來源

2018-02-28 23:11:52 davaus

在我看到你的答案之前，我不知道有一個PrimeFaces庫的Angular。它看起來很有趣。 – AlanObject

調整p：樹來使用可用高度

回答

相關問題