3 Replies Latest reply on Apr 28, 2011 6:47 PM by jules poit

    rich:list and rich:tab issues

    jules poit Newbie

      Hello everybody

       

      I am having two issues with the RF 4. I migrating my UI from RF 3.3.3 to RF4 Final :

       

      • When I have a <rich:list> inside a <rich:extendedDataTable>, the row of the extendedDataTable are not being resize to show the full content of the rich:list.Indeed, If I have 1, 2 or more elements in my <rich:list>, the row height in the extendedDataTable stay the same. So I only can see the first element of my rich:list (It was working with the 3.3.3)

       

             <rich:extendedDataTable

                          id="list"

                          rowClass="odd-row"

                          onrowmouseover="jQuery(this).addClass('active-row')"

                          onrowmouseout="jQuery(this).removeClass('active-row')"

                          value="#{bean.services}"

                          var="service"

                          sortMode="single"

                          selectionMode="single"

                          style="margin-top:5px; float: left; height:520px;">

       

       

       

                      <rich:column

                              id="group"

                              width="140px"

                              style="text-align:left">

                              <f:facet name="header">

                                  <h:outputText value="Group" />

                              </f:facet>

       

                              <rich:list

                                  var="group"

                                  value="#{bean.groupCollection}"

                                  type="unordered">

                                    <h:outputText value="#{group.groupName}"/><br/>

                                 </rich:list>

       

                          </rich:column>

            </rich:extendedDataTable>

       

      • Second issue, I have elements in a <rich:tab>, some of those elements are defined with float position. That leads to have the size of the content of the tab weird (see picture).

       

      Thank you for you help !!

        • 1. rich:list and rich:tab issues
          Ilya Shaikovsky Master

          1) in 4.x ExtendedDataTable rows height is fixed (as for SDT in 3.3.x). caused by the fact that it now has frozenColumns feature and consist of two tables in markup. So we need to keep the rows in them consistent.

           

          about the second issue - please show more code and we could try to adjust css to have design you need but without such issue.

          • 2. Re: rich:list and rich:tab issues
            jules poit Newbie

            1) Ok I will to have to find an other way to display my stuff then ^^

            2) Here the code I have :

             

            <rich:tabPanel

                                          switchType="ajax" >

             

                                <rich:tab

                                                                        header="TEST"

                                                                        name="Test"

                                                                        id="tab">

             

            <a4j:region id="firstPageRegion">

                  <ui:include src="firstPage.xhtml" />

                                                                                  </a4j:region>

                                                                                  <a4j:region id="secondPageRegion">

                  <ui:include src="secondPage.xhtml" />

                                                                                  </a4j:region>

                                                                                  <a4j:region id="thirdPageRegion">

                  <ui:include          src="thirdPage.xhtml" />

                                                                                  </a4j:region>

              </rich:tab

             

            </rich:tabPanel>

             

             

             

            firstPage.xhtml :

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml"

              xmlns:h="http://java.sun.com/jsf/html"

              xmlns:f="http://java.sun.com/jsf/core"

              xmlns:rich="http://richfaces.org/rich"

              xmlns:a4j="http://richfaces.org/a4j"

              xmlns:ui="http://java.sun.com/jsf/facelets">

             

             

            <ui:composition>

             

             

            <div style="margin-top:5px; float:left; width:53%;">

             

                                                    <rich:extendedDataTable

                                                              id="list"

              value="#{bean.services}"

                                                              var="service"

                                                              sortMode="single"

                                                              selectionMode="single"

                                                              style="margin-top:5px; float: left; height:520px;">

             

                      {columns ...}

             

            </rich:extendedDataTable>

             

                                </div>

            </ui:composition>

             

             

            secondPage.xhtml:

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml"

                      xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:f="http://java.sun.com/jsf/core"

                      xmlns:rich="http://richfaces.org/rich"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:ui="http://java.sun.com/jsf/facelets">

             

             

            <ui:composition>

             

             

            <div style="float:right; width:37%;">

             

                                                              <h:panelGrid columns="1">

             

                                                                        <h:outputLabel

                                                                                  value="Test"

                                                                                  for="TestId">

                                                                                  <h:outputText value="#{bean.test}" />

                                                                        </h:outputLabel>

             

             

            <h:inputText

                                                                                  id="TestId"

                                                                                  value="#{bean.test1}"

              size="40"

                                                                                  maxlength="100">

                                                                        </h:inputText>

             

            </div>

             

            </ui:composition>

             

            thirdPage.xhtml:

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml"

              xmlns:h="http://java.sun.com/jsf/html"

              xmlns:f="http://java.sun.com/jsf/core"

              xmlns:rich="http://richfaces.org/rich"

              xmlns:a4j="http://richfaces.org/a4j"

              xmlns:ui="http://java.sun.com/jsf/facelets">

             

             

            <ui:composition>

             

             

            <div style="float:right; width:37%;">

             

              <h:panelGrid columns="1">

             

              <h:outputLabel

              value="Test"

              for="TestId">

              <h:outputText value="#{bean.test}" />

              </h:outputLabel>

             

             

            <h:inputText

              id="TestId"

              value="#{bean.test1}"

              size="40"

              maxlength="100">

              </h:inputText>

             

            </div>

             

            </ui:composition>


             

            3) I find an other bug that only occurs on IE 7 (See attached picture). It is working fine on chrome/firefox :

            Here the code :

             

             

            <rich:tabPanel

                           switchType="ajax" >

             

                                <rich:tab

                                         header="TEST"

                                         name="Test"

                                         id="tab">

             

                                     {content}

             

                             </rich:tab>

             

            </rich:tabPanel>

             

             

             

            <rich:tab

                                                              header="TEST"

                                                              id="tab1"

                                                              switchType="client">

                   <ui:include src="test.xhtml" />

                                                    </rich:tab>

             

             

            test.xhtml:

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml"

                      xmlns:h="http://java.sun.com/jsf/html"

                      xmlns:f="http://java.sun.com/jsf/core"

                      xmlns:rich="http://richfaces.org/rich"

                      xmlns:a4j="http://richfaces.org/a4j"

                      xmlns:ui="http://java.sun.com/jsf/facelets">

             

             

            <ui:composition>

             

                                <rich:collapsiblePanel

                                          switchType="ajax"

                                          header="TEST"

                                          id="tesCollapse"

                                          toggleListener="#{bean.loadDataTable}"

                                          expanded="false">

             

             

            <rich:extendedDataTable

              value="#{bean.tableValues}"

                                          var="value"

                                          id="list"

                                          sortMode="single"

                                          selectionMode="none">

             

                         {columns}

             

            </rich:extendedDataTable>

             

                        </rich:collapsiblePanel>

             

             

            </ui:composition>

             

             

            </html>


             

            Sorry for the huge post

            • 3. Re: rich:list and rich:tab issues
              jules poit Newbie

              I found more on this issue, it is always happening on Firefox or IE 8 with this code :

               

              <rich:tabPanel    

                          id="tabParent"

                          switchType="client" >

               

                               <rich:tab

                                  header="Users"

                                  name="users"

                                  switchType="client"

                                  id="userTab">

                                 

                                  <h:form>

                                      <a4j:region id="userRegion">

                                          <ui:include src="user/usersList.xhtml" />

                                      </a4j:region>

                                  </h:form>

                              </rich:tab>

              </rich:tabPanel>

               

               

              The userList.xhtml contains a classic extendedDataTable I have no display (see the picture). Baiscally, I see my data displayed in the table for 1sec, then it dissapear !

              I tested that with IE 8 and Firefox (most recent stable build).

              Weird thing, if I use a <rich:dataTable> instead of an extendedDataTable, it is being display wihtout any issue.

              In my extendedTable I have specified the height (style="height:275px;"), and if I remove this attribute I am ending up with the picture in my previous post !

               

              I hope you will be able to take a look at that !!!

               

              Thank you

              RF4_Issues.png