Posted under JSF
Permalink
Tags Bug, CSS, Gotcha, JSF, Primefaces, Tip
If a header facet is used on a Primefaces table, the header does not allow for the scrollbars if present. the column headers do adjust for the scrollbars (although there are issues with column alignment between the headers and the data – a number of such errors have been posted to the Primefaces forum).
One workaround for this is to selectively include a CSS selector to adjust the header <div> width when the scrollbars are present.
The following selector achieves this:-
<style type=”text/css”>
.ss-tableheader-scrolladjust > div.ui-datatable-header {
width:495px;
}
</style>
The following table definition selectively includes this when enough rows are present to require scroll bars (this must be derived empirically as it depends on the height of the table, font size used etc. :-
<h:panelGroup layout=”block” style=”width:500px;”>
<p:dataTable var=”car” value=”#{tableBean.carsSmall}” scrollable=”true”
styleClass=”#{fn:length(tableBean.carsSmall) lt 8 ? ” : ‘ss-tableheader-scrolladjust’}” height=”200″ >
<f:facet name=”header”>
Ajax Sorting
</f:facet>
<p:column headerText=”Model” sortBy=”#{car.model}”>
<h:outputText value=”#{car.model}” />
</p:column>
<p:column headerText=”Year” sortBy=”#{car.year}”>
<h:outputText value=”#{car.year}” />
</p:column>
<p:column headerText=”Manufacturer” sortBy=”#{car.manufacturer}”>
<h:outputText value=”#{car.manufacturer}” />
</p:column>
<p:column headerText=”Color” sortBy=”#{car.color}”>
<h:outputText value=”#{car.color}” />
</p:column>
</p:dataTable>
</h:panelGroup>
Leave a Reply
You must be logged in to post a comment.