1. Set the HandleOffsetY and HandleOffsetX properties of the ResizableControlExtender control to 3.
2. During this point the handler will be set in the top right corner as the following code from the ResizableControlBehavior.js indicates:
// The this._handleHolder provedes a wrapper with absolute positioning
// so that this._handle can be absolutely positioned relative to the
// this._frame instead of the page
this._handleHolder = document.createElement('DIV');
this._handleHolder.style.width = '0px';
this._handleHolder.style.height = '0px';
this._handleHolder.style.position = ((Sys.Browser.agent === Sys.Browser.Opera) ?
'relative' : 'absolute');
this._frame.insertBefore(this._handleHolder, this._frame.firstChild);
// The this._handle represents the UI handle for the user to grab with
// the mouse
this._handle = document.createElement('DIV');
this._handle.className = this._HandleCssClass;
this._handle.style.position = 'absolute';
this._handleHolder.appendChild(this._handle);
3. So all we need to do is fix the _handler position:
//Get control using the behaviour id
var resizeControl = $find("ResizableControlExtenderBehavior1");
//Get initial left and top of the handler
var handlerInitialLeft = resizeControl._handle.style.left;
var handlerInitialTop = resizeControl._handle.style.top;
//Get the width and height of the resizable control
var myPanel = $get(GetdivParticipantsID());
var myPanelWidth = parseInt(myPanel .style.width.replace("px", "")) - 10;
var myPanelHeight = parseInt(myPanel .style.height.replace("px", "")) - 10;
//Change the handlers location
resizeControl._handle.style.left = (parseInt(handlerInitialLeft.replace("px", ""), 10)
myPanelWidth ) + "px";
resizeControl._handle.style.top = (parseInt(handlerInitialTop.replace("px", ""), 10) +
myPanelHeight ) + "px";
Enjoy.