2 Replies Latest reply on Jul 12, 2012 9:19 PM by Julio Masuda

    Printing Popuppanel

    Robert Schiller Newbie

      I want to print a Popuppanel using a button in this panel.

      Neither javascript:window.print() nor javascript:SeiteDrucken() prints the entire page.

      Only a small part ist printed. How do I get the entrie page printed.

      Thanks.

        • 1. Re: Printing Popuppanel
          Ilya Shaikovsky Master

          do you have any CSS with media="print" ? You should create one and properly exclude all the content except the popup panel body from being printed.

           

          Post should be moved to RichFaces space. That space for RF design discussions.

          • 2. Re: Printing Popuppanel
            Julio Masuda Newbie

            Hi,

            I have the similar problem too.

            When I click on commandLink "print popup", the printed document is blank.

            I would like to print the content of "popuppanel".

             

            Follow below the source code.

             

            Thanks in advance.

             

            [Richfaces 4.2.2 + IE 8 + Netbeans 7 + Tomcat 7]

             

             

             

            <?xml version='1.0' encoding='UTF-8' ?>
            <!DOCTYPE composition 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:a4j="http://richfaces.org/a4j"   
                            xmlns:rich="http://richfaces.org/rich">    
            <h:head>
              <style type="text/css">
               @media print {                        
                body > * {
                display: none ;
                }
                body > .rich-modalpanel {
                display: block;
                }
                .rich-mpnl_panel, .rich-mpnl_panel > div {
                position: static !important;
                }
                .rich-mpnl-mask-div, .rich-mpnl-shadow {
                display: none !important;
                }
                .rich-mp-content {                         
                overflow: visible !important;
                width: auto !important;
                height: auto !important;
                }                       
               }
              </style>
            </h:head>

            <h:form>
                <h:commandButton value="call the popup">
                    <rich:componentControl target="popup" operation="show" />
                </h:commandButton>   
            </h:form>
            <h:form>
                <rich:popupPanel id="popup" domElementAttachment="form" modal="false" autosized="true" resizeable="false"
                                 style="display: block">
                    <f:facet name="header">
                        <h:outputText value="Simple popup panel" />
                    </f:facet>
                    <f:facet name="controls">
                        <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">
                            X
                        </h:outputLink>           
                    </f:facet>
                    <p>Any content might be inside this panel</p>
                   
                    <p>
                        The popup panel is open and closed from the javascript function of component client side object.
                        The following code
                        <a href="#" onclick="#{rich:component('popup')}.hide()">hide this panel</a>
                        <f:verbatim>&#35;</f:verbatim>{rich:component('popup')}.hide()
                    </p>
                    <a4j:commandLink value="click to print popup" onclick="window.print();" />           
                </rich:popupPanel>
            </h:form>   
            </html>