3 Replies Latest reply: Nov 2, 2010 4:38 AM by Sascha Janz RSS

    flicker of modalpanel of pdf in iframe

    Sascha Janz Master

      i got a page with a dynamically created components and a page with an iframe which displays a pdf.

      for editing i use a modal panel. i use the latest richfaces version, with the correction that the modalpanel is rendered over the iframe.

      but in my page the modalpanel does heavliy flicker on mousemove.

      if i use the iframe and the modalpanel standalone everything is ok.

      someone an idea what the problem might be?

      my page is

      <?xml version="1.0" encoding="ISO-8859-1"?>
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       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:s="http://jboss.com/products/seam/taglib">
      
      
      
       <table width="100%" border="0" cellpadding="0" cellspacing="0" >
       <tr>
       <td colspan="2" >
       <h:form id="toolbar">
       <h:panelGroup id="toolbargroup" binding="#{Session.toolbargroup}" style="z-index:200" ></h:panelGroup>
       </h:form>
       </td>
       </tr>
       <tr>
       <td valign="top">
       <a4j:form id="wfindexform" >
       <h:inputHidden value="#{Session.current_id}" />
       <h:panelGroup id="wfindexpanelgroup" binding="#{Session.panelgroup}" style="z-index:200" >
       </h:panelGroup>
      
       </a4j:form>
       </td>
       <td>
      
       <a4j:form id="docframe" >
      
       <iframe src="#{Session.masterdoc}" style="position:relative;width:800px;height:1000px;background-color: white; overflow-y: hidden; z-index: -1" />
       </a4j:form>
      
       </td>
       </tr>
       </table>
      <rich:modalPanel id="edittabledlg" autosized="true" moveable="true" overlapEmbedObjects="true" rendered="true" >
       <f:facet name="header">
       <h:panelGroup>
       <h:outputText value="bearbeiten..."></h:outputText>
      
       </h:panelGroup>
       </f:facet>
      
      
       <h:form id="tabledata">
      
      <a4j:outputPanel >
      
       <h:panelGrid id="idrowdata" columns="2" binding="#{Session.rowdatagrid}">
       </h:panelGrid>
       </a4j:outputPanel>
      
       <h:panelGrid columns="4" style="float:right" >
       <!-- a4j:commandButton id="prevrow" value="Zurück"
       styleClass="rich-button" style="width:90px"
       reRender="wfindexpanelgroup">
       </a4j:commandButton>
       <a4j:commandButton id="nextrow" value="Vor"
       oncomplete="Richfaces.hideModalPanel('edittabledatadlg');"
       styleClass="rich-button" style="width:90px"
       reRender="wfindexpanelgroup">
       </a4j:commandButton> -->
      
      
       <a4j:commandButton id="saverowdata" value="Ok"
       oncomplete="Richfaces.hideModalPanel('edittabledatadlg');"
       styleClass="rich-button" style="width:90px" action="#{Session.tablerowsave}"
       reRender="wfindexpanelgroup">
       </a4j:commandButton>
       <a4j:commandButton id="saverowdatacancel" value="Abbrechen" immediate="true" style="width:90px"
       onclick="Richfaces.hideModalPanel('edittabledatadlg')"
       styleClass="rich-button" reRender="panelgroup" >
       </a4j:commandButton>
       </h:panelGrid>
       </h:form>
      
      
      </rich:modalPanel>
      </ui:composition>
      
      
      


      the isolated page that works

      
      <!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:ui="http://java.sun.com/jsf/facelets"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:s="http://jboss.com/products/seam/taglib">
      
      
       <iframe src="docs/a.pdf"
      style="position:relative;width: 500px; height: 500px; background-color: white; overflow-y: hidden; z-index: 1" />
      
      <a4j:form style="position:absolute;left:600px;top:600px;" >
      <h:outputText value="Hallo? " />
      <a4j:commandButton value="Click" reRender="modalPanelID" action="#{Session.openedit}" oncomplete="Richfaces.showModalPanel('modalPanelID');"></a4j:commandButton>
      </a4j:form>
      <rich:modalPanel zindex="333" autosized="true" overlapEmbedObjects="true" moveable="true" id="modalPanelID">
      
      
      <f:facet name="header">
      <h:outputText value="Heder goes here..." />
      </f:facet>
      <f:facet name="controls">
      <h:graphicImage value="/pics/error.gif"
      onclick="Richfaces.hideModalPanel('modalPanelID'); return false;" />
      </f:facet>
      <a4j:outputPanel>
      <h:outputText value="Text" />
      <h:inputText value="12313" />
      </a4j:outputPanel>
      <a4j:outputPanel>
       <h:panelGrid id="idrowdata2" columns="2" binding="#{Session.rowdatagrid}">
       </h:panelGrid>
       </a4j:outputPanel>
      
      <a4j:commandButton value="Test"></a4j:commandButton>
      
       <h:panelGrid columns="4" style="float:right" >
       <a4j:commandButton id="prevrow" value="Zurueck"
       styleClass="rich-button" style="width:90px"
       reRender="wfindexpanelgroup">
       </a4j:commandButton>
       <a4j:commandButton id="nextrow" value="Vor"
       oncomplete="Richfaces.hideModalPanel('edittabledatadlg');"
       styleClass="rich-button" style="width:90px" >
       </a4j:commandButton>
      
      
       <a4j:commandButton id="saverowdata" value="Ok"
       oncomplete="Richfaces.hideModalPanel('edittabledatadlg');"
       styleClass="rich-button" style="width:90px"
       >
       </a4j:commandButton>
       <a4j:commandButton id="saverowdatacancel" value="Abbrechen" immediate="true" style="width:90px"
       onclick="Richfaces.hideModalPanel('edittabledatadlg')"
       styleClass="rich-button" >
       </a4j:commandButton>
       </h:panelGrid>
      
      </rich:modalPanel>
      
      
      </html>