Thursday, October 31, 2013

How to make popup that can be dragged past edge of browser window.

I had a large dialog that I wanted to be able to move out of the way so that I could see what was behind it without closing it.   Normally any part of the dialog cannot be dragged off the edge of the browser window.   Configuring this turned out to be pretty simple.  Just add an inline style for the margin and give negative numbers to the sides you want to drag off the edge of the screen.  In the example below I don't want the top to be draggable past the top edge (because the top bar wouldn't be visible to drag it back down)  The left and right I set to -200 so that I could drag it 200 pixels to the left or right of the windows edge and 300 pixels past the bottom of the window.   This allows me to move it mostly out of the way without having to close it.

   <af:popup id="ppcal" clientComponent="true">
<af:dialog id="d1" title="Calculator"
               modal="false" type="ok"
               inlineStyle="width:450px; margin:0px -200px -300px; padding:-200.0px>