jsf 2 - datatable with columGroup has issue in responsive mode -


i using sentinel 2.1 , primefaces 5.3, jsf 2.0, on weblogic 11g.

we have production applications running on above spec long time now, , have no issues other below.

i have datatable col span , row span. table looks fine in desktop mode, when seen in responsive mode, table looks odd , user cannot make sense out of data table.

xhtml

    <p:datatable var="esl" value="#{estleaves.eleaves}" reflow="true"                         >                          <p:columngroup type="header">                             <p:row>                                 <p:column rowspan="2" headertext="employee" styleclass="wid10"/>                                 <p:column colspan="4" headertext="jan" />                                 <p:column colspan="4" headertext="feb" />                             </p:row>          <p:row>                                 <p:column headertext="w1" styleclass="fs9" style="padding-left:0;padding-right:0" />                                 <p:column headertext="w2" styleclass="fs9" style="padding-left:0;padding-right:0" />                                 <p:column headertext="w3" styleclass="fs9" style="padding-left:0;padding-right:0" />                                 <p:column headertext="w4" styleclass="fs9" style="padding-left:0;padding-right:0" />                                  <p:column headertext="w1" styleclass="fs9" style="padding-left:0;padding-right:0" />                                 <p:column headertext="w2" styleclass="fs9" style="padding-left:0;padding-right:0" />                                 <p:column headertext="w3" styleclass="fs9" style="padding-left:0;padding-right:0" />                                 <p:column headertext="w4" styleclass="fs9" style="padding-left:0;padding-right:0" />                             </p:row>                         </p:columngroup>          <p:column>                             <h:outputtext value="#{esl.empname}" />                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.jan.w1}"  />                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.jan.w2}" />                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.jan.w3}"/>                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.jan.w4}"/>                         </p:column>                          <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.feb.w1}" />                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.feb.w2}" />                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.feb.w3}"/>                         </p:column>                         <p:column styleclass="fs14"  >                             <h:outputtext value="#{esl.feb.w4}"/>                         </p:column> 

screenshot of datatable on desktop mode enter image description here

screenshot of datatable on responsive mode of iphone pixel approx.. enter image description here


Comments

Popular posts from this blog

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

scala - 'wrong top statement declaration' when using slick in IntelliJ -

PySide and Qt Properties: Connecting signals from Python to QML -