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

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

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

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