flicker of modalpanel of pdf in iframe
ajanz Feb 28, 2009 11:42 AMi 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>