1 Reply Latest reply on Apr 12, 2007 8:53 PM by Sergey Smirnov

    Alter position of modalPanel

    Kirll Solovyev Newbie

      I want to stick position of modalPanel next to the "Select" button taking into account possible resizing of browser window.

      .....
      <button onclick="javascript:Richfaces.showModalPanel('mp1')">Select
      <rich:modalPanel id="mp1" minHeight="100" minWidth="200"
      height="200 width="400" zindex="300">
      .......
      </rich:modalPanel>
      .....




      Is there a way to do this?

      Thank You.

        • 1. Re: Alter position of modalPanel
          Sergey Smirnov Master

          modal panel has absolute position. So, putting it inside the button tag does not make any sense.

          showModalPanel function has a second parameter that defines some possible option. Two of them allows to set top and right positions (the default value for them is 'auto'). For example,
          Richfaces.showModalPanel('mp1', {top:100, left:100})" put panel in the position of (100,100).

          In your case, you need to pass a position calculated based on the button position.

          This is a very simple example:

          <script>
           function getRightTop(ref) {
           var position = new Object();
           position.top = ref.offsetTop;
           position.left = ref.offsetLeft+ref.clientWidth+6;
           return position;
           }
          </script>
          .....
          <button onclick="var pos=getRightTop(this);Richfaces.showModalPanel('mp1',{top:pos.top, left:pos.left})">Select<button>
          ....
          <rich:modalPanel id="mp1" minHeight="100" minWidth="200"
          height="200 width="400" zindex="300">
          .......
          </rich:modalPanel>
          


          Note that getRightTop() function above will not be accurate if you use DOM button's parent elements with absolute positions. I.e. you need to work on writing more accurate javascript code.