Row Display (Alignment) Issue for rich:extendedDataTable.

[sandy4you]

Hi All,

After adding a checkbox in the first column for the data-table the row alignment goes for a toss.

Any help for getting the alignment fixed would be highly appreciated.

For more details please see the code snippet below along with the output.

Code Snippet:

               <rich:extendedDataTable

                    id="tbedt_FailurePool"

                    rows="20"  

                    width="600px"

                    var="failurePool"

                    value="#{correspondenceFailurePoolOverviewBean.dataModel}">

                    <f:facet name="footer">

                        <rich:dataScroller id="dataScroller_FailurePool" align="left" maxPages="10" />

                    </f:facet>

                    <rich:column id="checkboxSelection" width="45px;" height="13px">

                              <f:facet name="header">

                                        <h:outputText value="&#160;"/>

                              </f:facet>

                         <h:selectBooleanCheckbox                                   

                               id="select_FailedCorrespondence"

                              value="#{failurePool.selected}">

                                                                      <a4j:ajax

                                                                                render="@this"

                                                                                execute="@this"

                                                                                listener="#{correspondenceFailurePoolOverviewBean.dataModel.selectCorrespondence}" />

                                                                      <f:attribute name="rowData" value="#{failurePool.failedCorrespondenceDTO}" />

                           </h:selectBooleanCheckbox>

                           <br/>

                      </rich:column>

                    <rich:column id="tbc_CorrespondenceExtId" width="220px">

                        <f:facet name="header">

                            <comp:sortColumnHeader

                                id="tbs_CorrespondenceExtId"

                                headerLabel="#{commonTrans['BO.ui.unicorn.failurePool.correspondenceExtId']}"

                                sortField="externalId"

                                render="tbedt_FailurePool"

                                currentDataModel="#{correspondenceFailurePoolOverviewBean.dataModel}"/>

                            <br/>

                            <h:inputText

                                id="int_CorrespondenceExtIdFilter"

                                value="#{correspondenceFailurePoolOverviewBean.dataModel.searchFilterDTO.correspondenceExternalId}" />

                        </f:facet>

                        <comp:tableText

                                  id="tbt_CorrespondenceExtId"

                                  text="#{failurePool.failedCorrespondenceDTO.correspondenceExternalId}" />

                    </rich:column>

                    <rich:column id="tbc_CreatedOn" width="220px">

                        <f:facet name="header">

                            <comp:sortColumnHeader

                                id="tbs_CreatedOn"

                                headerLabel="#{commonTrans['BO.ui.unicorn.failurePool.createdOn']}"

                                sortField="insertedAt"

                                render="tbedt_FailurePool"

                                currentDataModel="#{correspondenceFailurePoolOverviewBean.dataModel}"/>

                            <br/>

                            <rich:calendar

                                id="cal_CreatedOnFilter"

                                value="#{correspondenceFailurePoolOverviewBean.dataModel.searchFilterDTO.createdOn}"

                                datePattern="#{lov:getDatePattern('SHORT_DATE')}" />

                        </f:facet>

                        <comp:tableJodaDateText

                            id="tbd_CreatedOn"

                            date="#{failurePool.failedCorrespondenceDTO.createdOn}"

                            patternStyle="MEDIUM_DATE" />

                    </rich:column>

                    -------------------------- So on for other columns........

               </rich:extendedDataTable>

[michpetrov]

Hi,

there is something causing a height difference in table cells (the standard height is 20px). It may be your CSS or even your browser. This is difficult to "fix" from my end, but if you inspect the page in your browser you should be able to find out what's causing it. Also "height" is not a supported attribute for rich:column.

[sandy4you]

Hi All,

Finally after trying it for a long time, I got the alignment fixed.

<!--

                                                  Need to Override the CSS for the Data-Table row here otherwise the row alignment will not be

                                                  proper because of the check-box in the first column. Changing the height from 20px to auto.

                                         -->

                                  <style type="text/css">

                                            .rf-edt-c {

                                                      height: auto !important;

                                                      overflow: hidden;

                                                  }

                                  </style>

                <rich:extendedDataTable

                    id="tbedt_FailurePool"

                    rows="20"  

                    width="600px"

                    var="failurePool"

                    value="#{correspondenceFailurePoolOverviewBean.dataModel}">

                    <f:facet name="footer">

                        <rich:dataScroller id="dataScroller_FailurePool" align="left" maxPages="10" />

                    </f:facet>

Now things works just fine.