Geeks With Blogs
BizTalk Blog by Chris Han System Design for Enterprise Agility,

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. 

 

Posted on Monday, April 2, 2007 2:22 PM Ajax | Back to top


Comments on this post: The position problem with ListSearch control in Ajax ControlTool Kit

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
Just in case no one has told you this today.. YOU ROCK!
Left by Michael Washington on May 13, 2007 1:43 PM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
Always been nice to hear that I can help.
Left by Chris Han on May 13, 2007 11:46 PM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
Greatest !!!

This has solved all my worrying problem of using AjaxControlToolkit

Thanks a lot
Left by Jaydeep Bhatt on Apr 13, 2008 2:55 AM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
Great tip, which saved lot of my time being working on AjaxControlToolkit...

Many thanks
Left by Surjeet Gill on May 23, 2008 10:23 AM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
YOU ARE STILL ROCKING!!!

cheers Ang
Left by ang on Jan 28, 2009 8:54 AM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
(YOU ROCK)++
Left by Harley on Feb 04, 2009 5:14 PM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
Dude, you saved our lives!
Enormous thanks!
Left by Lance on Dec 03, 2009 8:12 AM

# re: The position problem with ListSearch control in Ajax ControlTool Kit
Requesting Gravatar...
glad it helps, Lance.
Left by Chris on Dec 05, 2009 11:18 AM

Your comment:
 (will show your gravatar)


Copyright © Chris Han | Powered by: GeeksWithBlogs.net