Layout is blinking on Firefox

[radu321]

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

[ilya_shaikovsky]

sorry but could not reproduce. any more details?

[radu321]

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

[radu321]

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