Alter position of modalPanel

[solovyevk]

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.

[sergeysmirnov]

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.