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 \u2013 a number of such errors have been posted to the Primefaces forum).<\/p>\n
One workaround for this is to selectively include a CSS selector to adjust the header <div> width when the scrollbars are present.
\nThe following selector achieves this:-<\/p>\n
<style type=”text\/css”>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
\u00a0\u00a0\u00a0 .ss-tableheader-scrolladjust > div.ui-datatable-header {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width:495px;
\n\u00a0\u00a0\u00a0 }
\n<\/style><\/p>\n
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. :-<\/p>\n
\u00a0\u00a0\u00a0\u00a0 <h:panelGroup layout=”block” style=”width:500px;”>\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p:column headerText=”Year”\u00a0 sortBy=”#{car.year}”> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p:column headerText=”Manufacturer”\u00a0 sortBy=”#{car.manufacturer}”> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p:column headerText=”Color” sortBy=”#{car.color}”> 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 \u2013 a number of such errors have been posted to the Primefaces forum). One […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[13,189,40,184,112,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1046"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1046"}],"version-history":[{"count":3,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1046\/revisions"}],"predecessor-version":[{"id":1049,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1046\/revisions\/1049"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u00a0\u00a0\u00a0\u00a0 <p:dataTable var=”car” value=”#{tableBean.carsSmall}” scrollable=”true”\u00a0
\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 styleClass=”#{fn:length(tableBean.carsSmall) lt 8 ? ” : ‘ss-tableheader-scrolladjust’}” height=”200″ >\u00a0
\n<\/em><\/strong>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <f:facet name=”header”>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Ajax Sorting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/f:facet>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p:column headerText=”Model”\u00a0 sortBy=”#{car.model}”>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h:outputText value=”#{car.model}” \/>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p:column><\/p>\n
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h:outputText value=”#{car.year}” \/>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p:column><\/p>\n
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h:outputText value=”#{car.manufacturer}” \/>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p:column><\/p>\n
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h:outputText value=”#{car.color}” \/>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/p:column>
\n\u00a0\u00a0\u00a0\u00a0 <\/p:dataTable>
\n\u00a0\u00a0\u00a0 <\/h:panelGroup><\/p>\n","protected":false},"excerpt":{"rendered":"