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>