maxWidth and maxHight for modalPanel or equivelent

[buffe]

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

[amarkhel]

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>