Отрегулируйте p: дерево, чтобы использовать доступную высоту

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> 

Что происходит, так это то, что высота макета составляет около 200 пикселей. (Значение высоты CSS не имеет эффекта). Как только вы разворачиваете несколько узлов в дереве, вам нужно начать вертикальную прокрутку, в то время как в пространстве p: layout есть много потерянного пробела.

Любой намек на то, как это сделать?

Update: я обнаружил, что могу приблизиться к эффекту, что я хочу, если я введу абсолютную высоту, как это:

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

кажется, что значение высоты зависит от некоторого внешнего контейнера. Однако, если это так, то почему объект может изменить размер, когда я изменяю горизонтальный размер окна браузера? Я хочу, чтобы он отвечал на вертикальный размер.

Answer 1

В 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; 
} 

Я хотел бы использовать style атрибут для добавления CSS используйте свойство необходимо: height:100%: <p:tree style="height:100%"/>.

Прежде чем, изменив код, добавьте этот стиль в дерево, используя инструменты разработчика Chrome или Firefox, чтобы убедиться, что он работает!

Answer 2

В моем коде компонента, который использует элемент управления p-tree PrimeNg, я использую переменную входной строки и присваиваю ей высоту класса ui. После этого вы можете установить его на пикселей или процентов высоты:

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>