2 Replies Latest reply on Jun 20, 2013 1:34 AM by Sandeep Singh

    Row Display (Alignment) Issue for rich:extendedDataTable.

    Sandeep Singh Newbie

      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.

      Row_Display_Issues.JPG

      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>

        • 1. Re: Row Display (Alignment) Issue for rich:extendedDataTable.
          Michal Petrov Master

          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.

          • 2. Re: Row Display (Alignment) Issue for rich:extendedDataTable.
            Sandeep Singh Newbie

            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.Corrected_Row_Issues.JPG