1 Reply Latest reply on Sep 28, 2010 7:19 AM by Andrey Markhel

    maxWidth and maxHight for modalPanel or equivelent

    chamila piyasena Newbie

      Hi,

       

      I wanted to show an image in a modalPanel dynamically when the user clicks on the thumbnail of the image. I have done that using,

       

      <rich:modalPanel id="myModal" autosized="true">
               <f:facet name="header">
                  <h:panelGroup>
                     <h:outputText value="Preview Image" />
                  </h:panelGroup>
               </f:facet>
               <f:facet name="controls">
                  <h:graphicImage value="/img/popup_close_btn.png" style="cursor:pointer"
                     onclick="Richfaces.hideModalPanel('myModal')" />
               </f:facet>
               <div id="imageDiv"><img id="modalImage" src="#{imageAction.displayImage.imageUrl}" /></div>

      </rich:modalPanel>

       

      But the problem is when the image is too large the popup takes the whole screen, so I want a way to give the popup or the image a maxwidth and a maxHight. But couldn't figure out a way in rich face to do it.  Is there a way to achive this?

       

      Thank You

        • 1. Re: maxWidth and maxHight for modalPanel or equivelent
          Andrey Markhel Newbie

          There are no ways to do it in 3.3.3. This attribbutes were added to popupPanel only in 4.0 version of richfaces. As workaround you can try next trick:

          After open modal panel by onclick="Richfaces.hideModalPanel('myModal'); adjustModalPanel('myModal')" you can call your custom javascript function. For example :

           

          <script>

          function adjustModalPanel(id){

               var element = //find modal panel content div by given id

               var width = element.width// get style of element and calculate width(by prototype or jQuery etc..)

               var height = element.height// same as for width

               if(width > MAX_WIDTH){

                    element.setWidth(MAX_WIDTH)// it is not concrete code dependent of your choice

               }

               ..same for height..........

          }

          </script>