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
screenshot of datatable on responsive mode of iphone pixel approx..
Comments
Post a Comment