3 Replies Latest reply on Mar 17, 2008 5:36 AM by Techie Exchange

    Modalpanel dynamic height

    Techie Exchange Newbie

      Hi,
      I would like to change modalpanel height dynamically thru JS (becos modalpanel content size is unpredictable).
      In order to do that, I always take the POS (x,y) of last HTML element (may be a commandbutton) and then manipulate it to get a new height and set that height to modalpanel's content DIV style.


      Modalpanel code:

      <rich:modalPanel resizeable="true" left="300" top="170" id="loginModal" minHeight="200" minWidth="450" width="500" zindex="2000">
       <f:facet name="header">
       <h:outputText value="Login" />
      </f:facet>
      
      <h:form id="login">
       <rich:panel>
       <f:facet name="header"></f:facet>
       <table cellpadding="0" cellspacing="0" border="0">
       <tr>
       <td valign="top">
       [some dynamic content with unpredictable size mainly height]
      </td>
      </tr>
       <tr>
       <td valign="top">
       <h:commandButton id="login"
       action="#{loginBean.login}" styleClass="submit" value="Login" />
       </td>
       </tr>
      </table>
      
      </rich:panel>
      
      </h:form>
      


      I'm just considering commandbutton element and debug gives me:
      var reference = document.getElementById('login:login');
      reference.offsetParent -> undefined
      reference.offsetLeft -> 0
      reference.offsetTop -> 0


      As offsetParent is undefined I cannot find posX and posY.

      I used this method several times before (without Richfaces) and it worked as expected.
      May be something to do with richfaces+prototype?
      Like to hear from users about this.
      Or any other implementation to change modalpanel height dynamically.

      Thanks