0

How is it possible to set a "dynamic" height to an pf element?

My Problem: I have a div tag with a height of 80vh. Inside that div tag i have a TabView ->Tab-> Tree. In want that the Tree has the same height as the TabView, here is my Code:

    <div id="content" style="height: 80vh">
    <p:tabView id="tabView" style="height: 100%">
        <p:tab id="tab" title="Menu">
            <p:tree id="tree" value="#{treeBean.rootTreeNode}" var="node" dynamic="true"
                    styleClass="treeClass">
                <p:treeNode>
                    <h:outputText value="#{node}"/>
                </p:treeNode>
            </p:tree>
        </p:tab>

        code for second tab...

        </p:tab>

    </p:tabView>
</div>

If figured out, stlye = "height: 100%" only references the height of the parent element. But i cant set the height of the <p:tab>. Now i set the value to a fixed px value so it fits for me. But on other screens it doesnt.

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
pmueller
  • 143
  • 1
  • 19

1 Answers1

2

See skinning documentation of TabView: https://primefaces.github.io/primefaces/8_0/#/components/tabview?id=skinning

And then maybe try setting the CSS for the tab panels

.ui-tabs-panel {
   height: 100%;
}
Melloware
  • 10,435
  • 2
  • 32
  • 62