3 Replies Latest reply on Mar 30, 2010 4:12 AM by radu radu

    Layout is blinking on Firefox

    radu radu Novice

      Hi ,

       

      When toggles are expanding or collapsing (content from rich:toggleControl was clicked) the page is blinking, this happends only on FireFox.

       

      I noticed that only when a vertical scroll (which came   from an aj4:output panel having layout="block" and a fix height defined) appears and many toggels are in expand mode this happend.

       

      If there is no vertical scroll or only one toggle was clicked for expand / collapse the behaviour is the right one.

       

      Please if you have an idea about this give me a hand.

       

      Thanks,

      Radu

        • 1. Re: Layout is blinking on Firefox
          Ilya Shaikovsky Master

          sorry but could not reproduce. any more details?

          • 2. Re: Layout is blinking on Firefox
            radu radu Novice

            Thank you very much for your reply.

             

            This is a part of the code:

             

             

            <a4j:outputPanel layout="block" styleClass="scrollHeight">
             
             <h:panelGrid columns="1" cellspacing="0" cellpadding="0" styleClass="introduction">     
              <h:outputText value="appears only one here as introduction for next toggles" />
            
            </h:panelGrid>
            
            <rich:spacer styleClass="distanceBetweenToggles" />
            
              <rich:toggleControl for="myToggle">
                <h:panelGrid columns="2" cellspacing="0" cellpadding="0" styleClass="formatToggle"
                     columnClasses="col1, col2" id="panelId">
                     <h:outputText value="my data" />
                     <h:graphicImage value="#{myBean2.value ? mes.up : mes.down}"
                     <a4j:support event="onclick" reRender="panelId" immediate="true">
                         <a4j:actionparam name="paramName"
                         value="#{myBean1.value}"
                             assignTo="#{myBean2.value}" />
                       </a4j:support>
                </h:panelGrid>
                </rich:toggleControl>
                <rich:togglePanel stateOrder="opened, empty" switchType="client" id="myToggle">
                    <f:facet name="empty">
                        <h:panelGroup />
                    </f:facet>
                    <f:facet name="opened">
                    <h:panelGrid columns="2" cellspacing="0" cellpadding="0" styleClass="panelGrid1" columnClasses="col1">
                      <rich:spacer />
                       //content
                      ....
                 </rich:togglePanel>
            
            <rich:spacer styleClass="distanceBetweenToggles" />
            
            
             //another toggle and so on
            </a4j:outputPanel>

             

             

            Also first toggle from page does not cause this behavior, only clicking those after it when this is expanded causes this behavior. (their is scroll on page).

             

            All toggles have above model, only content is different from one to another.

             

            This is happening on Firefox 3.6.2 and Rich Faces 3.3.2 .

             

            Regards,

            Radu

            • 3. Re: Layout is blinking on Firefox
              radu radu Novice

              I solved the issue.

               

              I put each rich:toggleControl into a panel grid and layout stops blinking.

               

              In code having something like this:

               

               

              <h:panelGrid columns="1" styleClass="myGrid" cellpadding="0"  cellspacing="0">
                   <rich:toggleControl for="myToggle1">
                   ....
                   </rich:toggleControlo>
              </h:panelGrid>
              <rich:togglePanel stateOrder="opened, empty" switchType="client" id="myToggle1">
              ...
              </rich:togglePanel>
              <h:panelGrid columns="1" styleClass="myGrid" cellpadding="0"  cellspacing="0">
                   <rich:toggleControl for="myToggle2">
                   ....
                   </rich:toggleControlo>
              </h:panelGrid>
              <rich:togglePanel stateOrder="opened, empty" switchType="client" id="myToggle2">
              ...
              </rich:togglePanel>
              
              

               

              and so on with all next toggles.

              Regards,
              Radu