Menu
[Primefaces 5.0]
I have a tabview that holds a datatable. Depending on the tab, the datatable is filled with different data (i.e. a different number of columns and rows). The following setup handles the data fine, but no matter if I put the max-height constraint on the panel, the tab, or the datatable, it doesn't seem to constrain it to that percent of the screen. If I set the constraint to a particular value (e.g. 300px), it works, but I'd rather not.
Basically: I want a datatable that will fit its content up to the point that it takes up 30% of the screen. At this point, it should scroll.
<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;">
<div style="width: 10%;float: left"> ... </div>
<div style="width: 90%;float: right">
<p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%">
<p:tabView value="#{pageBean.tables}" var="table" dynamic="true">
<p:tab title="#{table.tableName}" >
<p:dataTable var="row"
value="#{pageBean.tableData[table.tableName].data}"
resizableColumns="true">
<p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;"
var="column" columnIndexVar="columnIndex">
<f:facet name="header">
<p:outputLabel value="#{column}"/>
</f:facet>
<p:outputLabel value="#{row[columnIndex]}"/>
</p:columns>
</p:dataTable>
</p:tab>
</p:tabView>
</p:panel>
...
</div>
</body>
395
You can use "vh" on the size of max-height, for viewport height like this:
<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;">
<div style="width: 10%;float: left"> ... </div>
<div style="width: 90%;float: right">
<p:panel classStyle="panel" header="Instance Data View" style="width: 100%;margin-bottom: 1%">
<p:tabView value="#{pageBean.tables}" var="table" dynamic="true">
<p:tab title="#{table.tableName}" >
<p:dataTable var="row"
value="#{pageBean.tableData[table.tableName].data}"
resizableColumns="true" style="max-height: 30vh;">
<p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;"
var="column" columnIndexVar="columnIndex">
<f:facet name="header">
<p:outputLabel value="#{column}"/>
</f:facet>
<p:outputLabel value="#{row[columnIndex]}"/>
</p:columns>
</p:dataTable>
</p:tab>
</p:tabView>
</p:panel>
...
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
