header not aligning with columns when scrollable enabled JSF Primefaces 6.0

Question

I am developing web using PrimeFaces 6.0 components. On <p:dataTable> component when we set scrollable="true" option, columns headers alignment goes wrong.

Following is my code snippet:

<p:fieldset legend="Machine Test Match" id="panel233" toggleable="true"  toggleSpeed="500"  >
            <!--<p:panel id="panel233" header=" Machine Test Match" style="height:325px;border: none">-->
            <p:dataTable id="testmatchtable" var="testMatchvalues"   value="#{manufactureBean.listTestMatchata}" filteredValue="#{manufactureBean.filteredManufacture}"  editable="true" 
                         styleClass="mystyle" tableStyle="table-layout:auto;width:100% important!;"    rowKey="#{testMatchvalues.testId}"   scrollRows="10" scrollable="true"   scrollHeight="230"  rows="40"  liveScroll="true"       selection="#{manufactureBean.testMatchModel}" selectionMode="single"                         resizableColumns="true"      > 


                <p:column headerText="Test ID" filterBy="#{testMatchvalues.testId}" filterMatchMode="contains" style="width:35px">
                    <h:outputText value="#{testMatchvalues.testId}" />
                </p:column>

                <p:column headerText="Test Desc" filterBy="#{testMatchvalues.testDesc}" filterMatchMode="contains" style="width:35px" >
                    <h:outputText value="#{testMatchvalues.testDesc}" />
                </p:column>


                <p:column headerText="Specimen Desc" filterBy="#{testMatchvalues.specimenDesc}" filterMatchMode="contains" style="width:35px" >
                    <h:outputText value="#{testMatchvalues.specimenDesc}" />
                </p:column>
                <p:column headerText="Path Test Desc" filterBy="#{testMatchvalues.pathTestDesc}" filterMatchMode="contains" style="width:35px">
                    <h:outputText value="#{testMatchvalues.pathTestDesc}" />
                </p:column>
                <p:column headerText="Path Param Name"  style="width:35px" filterBy="#{testMatchvalues.parameterName}" filterMatchMode="contains">
                    <h:outputText value="#{testMatchvalues.parameterName}" />
                </p:column>
                <p:column headerText="Additional Factor"  style="width:35px" >
                    <h:outputText value="#{testMatchvalues.additionFactor}" />
                </p:column>
                <p:column headerText="Multiply Factor"  style="width:35px">
                    <h:outputText value="#{testMatchvalues.multiplyFactor}" />
                </p:column>
                <p:column headerText="Machine Host Code"  style="width:35px">
                    <h:outputText value="#{testMatchvalues.machineHostCode}" />
                </p:column>
                <p:column headerText="Active"  style="width:35px">
                    <h:outputText value="#{testMatchvalues.active}" />
                </p:column>
            </p:dataTable>
            <!--</p:panel>-->
        </p:fieldset>

Code taken from https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml

Attached image shows the problem clearly as column headers and data is not aligned properly.

Image link

Probably not super important but fyi to start, in your table style, important! should be !important — Old Schooled
@Kukeltje , I tried your suggestion .Now column alignment seems to be fine but problem is that I am not getting row data properly. If String is larger than column width it cuts it and remaining string looses. — Muhammad Nadeem

Undertaker Undertaker · Accepted Answer · 2017-11-13T14:56:55

0

votes

For p:column, width="4%" works for me rather than using '4px'

header not aligning with columns when scrollable enabled JSF Primefaces 6.0

1 Answers