Good day!
This may be either a bug or something in primefaces I am just missing. When I put a datatable inside of a splittertpanel and set that datatable to be scrollable, then the splitterpanels can no longer be dragged and resized, even if the panel itself is split horizontally, but the table's scroll direction is vertical. Does anyone know how I might fix this?
I am using the following in my app:
Here is the main xhtml file which is the script for the main view. The table itself is in the table:owner-location at the bottom:
<div style="height: 100%; overflow: hidden;">
<p:splitter style="height: 100%" resizeMode="fit">
<p:splitterPanel styleClass="align-items-center"
size="10">
<h:form style="height: 100%"
id="ownerTree">
<div class="panel-header"
style="display: flex; justify-content:space-between; align-items:center">
<span class="ui-panel-title form-label">Owners</span>
<span style="display: flex; align-items:center;">
<tree:tree-bookmark-menu controller="#{ownerTreeController}"
update="@form" />
<p:commandButton icon="pi pi-search"
value="Find"
style="margin-left: 15px;"
action="#{ownerTreeController.onFind}">
<p:ajax event="dialogReturn"
listener="#{ownerTreeController.findLocationClass}"
update="@form" />
</p:commandButton>
</span>
</div>
<div style="display: flex; align-items:stretch; height: calc(100% - 60px);">
<tree:tree-view controller="#{ownerTreeController}"
update=":frmDetail" />
</div>
</h:form>
</p:splitterPanel>
<p:splitterPanel styleClass="align-items-center"
size="90">
<h:form id="frmDetail"
style="overflow-y: hidden; height: 100%;">
<p:outputPanel class="sub-toolbar"
style="height: 45px;"
id="ownerLocationsToolbar">
<p:commandButton styleClass="ui-button"
value="Select Page"
style="margin-right: 10px;"
action="#{locationOwnerTableController.onSelectPage()}"
update="@form" />
<p:commandButton styleClass="ui-button"
style="margin-right: 10px;"
value="Clear Selection"
action="#{locationOwnerTableController.onClearSelected()}"
update="@form" />
<p:commandButton icon="pi pi-refresh"
styleClass="ui-button"
style="margin-right: 10px;"
action="#{locationOwnerTableController.onFind()}"
update="@form" />
<p:commandButton value="Allocate"
styleClass="ui-button"
disabled="#{not locationOwnerTableController.canAllocate}"
action="#{locationOwnerTableController.allocate()}"
update="@form" />
</p:outputPanel>
<p:card style="overflow-y: scroll; height: calc(100% - 44px);">
<table:owner-location controller="#{locationOwnerTableController}" />
</p:card>
</h:form>
</p:splitterPanel>
</p:splitter>
</div>
And here is the Datatable component:
<p:dataTable id="ownerLocationTable"
value="#{cc.attrs.controller.lazyModel}"
selection="#{cc.attrs.controller.selectedTableEntries}"
selectionMode="multiple"
rowKey="#{ownerLocation.id}"
update="ownerLocation"
stripedRows="true"
rowIndexVar="rowIndex"
widgetVar="ownerLocationTable"
var="ownerLocation"
rowSelectMode="add"
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks}
{NextPageLink} {LastPageLink} {RowsPerPageDropdown} {RowsCount}"
rowsPerPageTemplate="5,10,15,50,100"
rows="15"
scrollable="true"
scrollHeight="auto"
scrollWidth="auto">
The datatable is is inside a cc:implementation, if it will make any difference. Here is a link to a test project where the issue has been reproduced: https://gitlab.com/f1688/primefaces-test-project Any help would be greatly appreciated.
OK so the Splitters work using Flex.
this.prevPanelElement.css('flexBasis', 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.cfg.gutterSize) + 'px)');
this.nextPanelElement.css('flexBasis', 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.cfg.gutterSize) + 'px)');
which you can see in the HTML DOM..
style="flex-basis: calc(88.0967% - 4px);"
However when using DataTable scrollable="true" that DataTable element cannot be flex sized. When you remove scrollable="true" then the Datatable can be flex sized.
That helps explain why and I think its how the DataTable scrollable="true" has to work.