3 Replies Latest reply on Feb 25, 2014 5:06 AM by ppitonak

    rich:collapsiblePanel does not work in version 4.3.5.Final

    deepak26v

      I am facing an issue in my JSF project where the collapsiblePanel does not collapse or expand on click. Basically it is not responding to the on-click events. I am not sure if I am missing something. I even copy pasted the same code from showcase (Richfaces demo site) but I face the same problem. I am facing this issue on IE 8 and Chrome. The same issue happens when I try the tabPanel control. Please help me.

       

      Following is my HTML:

       

      <ui:composition

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

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

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

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

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

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

       

         <h:head/>

           <rich:collapsiblePanel header="Overview" switchType="client">

               RichFaces is a component library for JSF and an advanced framework for

               easily integrating AJAX capabilities into business applications.

           </rich:collapsiblePanel>

           <p>

               <b>And that panel switched by ajax and closed by default:</b>

           </p>

           <rich:collapsiblePanel header="JSF 2 and RichFaces 4" expanded="false" switchType="client">

               <p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is

                   a summary of updates and features:</p>

           </rich:collapsiblePanel>

      </ui:composition>

       

      I have attached a GIF image which depicts the issue when I click on panels.

       

      Note: The JSF version in my project is 2.2.5 and RichFaces 4.3.5.Final.

        • 1. Re: rich:collapsiblePanel does not work in version 4.3.5.Final
          ppitonak

          Hi,

           

          collapsiblePanel works fine in 4.3.5.Final. Did you copy&paste this code snippet? If yes, you need to change it slightly for the collapsiblePanel to work:

           

          <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:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

          <h:head/>

          <h:body>

          <rich:collapsiblePanel header="Overview" switchType="client">

                   RichFaces is a component library for JSF and an advanced framework for

                   easily integrating AJAX capabilities into business applications.

               </rich:collapsiblePanel>

               <p>

                   <b>And that panel switched by ajax and closed by default:</b>

               </p>

               <rich:collapsiblePanel header="JSF 2 and RichFaces 4" expanded="false" switchType="client">

                   <p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is

                       a summary of updates and features:</p>

               </rich:collapsiblePanel>

          </h:body>

          </html>

           

          Regards,

          Pavol

          • 2. Re: rich:collapsiblePanel does not work in version 4.3.5.Final
            deepak26v

            Thank you so much Pavol. It works like a charm now. Yes I copy pasted this code from the showcase website.

             

            On another note, I was trying to customize the font of the collapsiblePanel header. I see a property called "headerClass" but somehow I am not able to make it work. Here is the code:

             

            <rich:collapsiblePanel header="Client Info" switchType="client" headerExpandedClass="panelHeaderClass">

             

            and here is the declaration for the class:

            <h:head>

                 <style>

                   .panelHeaderClass {

                        font-size:9pt;

                 }

            </style>

            </h:head>

             

            Could you please help me ? Looks like I am missing something again.

            • 3. Re: rich:collapsiblePanel does not work in version 4.3.5.Final
              ppitonak

              You do it correctly, however, it doesn't work as expected because your class is always overwritten by RichFaces CSS classes.

               

              This should help:

              <style>

                     .panelHeaderClass {

                          font-size:9pt !important;

                   }

              </style>