The position problem with ListSearch control in Ajax ControlTool Kit

Chris Han — Mon, 02 Apr 2007 18:22:00 GMT

First of all, I'm using IE 6.0.2900.2180, Haven't test on other browsers.

I was using ListSearch control to decorate my drop down lists to provide the incremental-search ability. See the online demo here:

http://ajax.asp.net/ajaxtoolkit/ListSearch/ListSearch.aspx

It all looks smooth and neat untill after I put more ajax controls to make the page more "dynamic".

The problem I was experiencing is that the promp text will not be alway located right above or under the DropDown control I specified. (By default, the position is PositioningMode.TopLeft) The vertical location apear variously every time after I scroll the page!
I looked into the tool kit source code. It seems that the ListSearch extension internally uses the PopupExtender to create the promp text. And by default (PositioningMode.TopLeft), PopupExtender calculate the Y position as the PrompDiv's offsetHeight plus diff.y which is calculated by this code block:
///////////////////////////////////////////////////////////////////////////////////////////////////////

// offsetParent (doc element if absolutely positioned or no offsetparent available)
var offsetParent = elt.offsetParent || document.documentElement;
//alert(offsetParent.tagName); //IE is BODY if no DIV with relative postion around

// diff = difference in position between element's offsetParent and the element we will attach popup to.
// this is basically so we can position the popup in the right spot even though it may not be absolutely positioned
var diff;
var parentBounds;
if(this._parentElement) {
// we will be positioning the element against the assigned parent
parentBounds = CommonToolkitScripts.getBounds(this._parentElement);
var offsetParentLocation = CommonToolkitScripts.getLocation(offsetParent);
diff = {x: parentBounds.x - offsetParentLocation.x, y:parentBounds.y - offsetParentLocation.y};
}
else {
// we will be positioning the element against the offset parent by default, since no parent element given
parentBounds = CommonToolkitScripts.getBounds(offsetParent);
diff = {x:0, y:0};
}
///////////////////////////////////////////////////////////////////////////////////////////////////////

Notice that the first line is to find the relative parent element in the document in order to calculate the postion of the promp?

Realize that the offsetParent will be the "BODY" element in IE instead of the object which is the closest (nearest in the containment hierarchy) positioned containing element in Mozzila, I find that the way to solve this problem in IE is to:

1. Have a panel control wrap around the drop down list and your SearchList control.
2. Create a stylesheet class like this:
.DDLPanelListSearchExtender
{
position: relative;
}

3. Specify the CssClass property of the panel control you added at the first step to this new stylesheet class DDLPanelListSearchExtender

You can feather use the theme to simplify this task by adding a Panel.skin which looks like this:
<asp:Panel runat="server" BorderWidth="0px" CssClass="DDLPanelListSearchExtender"/>

Happy coding!

P.s. theoritically, this postion problem will also apear on any control that depends on PopupExtender, such as PopupControl.