I have a DataList working with Popup Control, when I click the items in the datalist, the corresponding popup Control shows up. it works fine when there are very limited number of records in the datalist and there is no scroll bar( vertical scroll bar in my case), but if the records get increased and scroll bar appears, after I scroll  down to the bottom or somewhere, the popup window now will moved to the north by a certain distance instead of showing up at where I click, the distance seems to be proportional to how far I scrolled down, any one experienced similar situation? thanks

Could you post the code that is exposing this behaviour?

thanks for your response 

......

<

asp:DataList ID="SimilarSongDataList" runat="server" CellPadding="0" CellSpacing="0" BorderWidth="0" OnItemCreated="SimilarSongDataList_ItemCreated" OnItemDataBound="SimilarSongDataList_ItemDataBound">
<ItemStyle CssClass = "grid_row" />
<AlternatingItemStyle CssClass = "grid_row_alt" />
<ItemTemplate>
<td class="grid_nums"><span class="grid_pound">#</span><asp:Label runat="server" ID="lblSimilarSongSerialNo"></asp:Label></td>
<td class="grid_song">

<asp:HyperLink ID="songName" runat="server" Text='<%# Eval("Name") %>'></asp:HyperLink>

</td>

<td class="grid_btns">

 

<asp:HyperLink runat="server" ID="lnkPlaySong" NavigateUrl='<%# Eval("Url") %>' >

<img src="/Bell.Sympatico.CMS/Images/inDiscover/btn_play.gif" alt="play" width="18" height="19" border="0" />

</asp:HyperLink>

 

<asp:HyperLink runat="server" ID="lnkAddToPlayList">

<img src="/Bell.Sympatico.CMS/Images/inDiscover/btn_playlist.gif" alt="Add To Playlist" width="18" height="19" border="0" />

</asp:HyperLink>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="lnkAddToPlayList" PopupControlID="Panel1" Position="Bottom" />

</td>

</ItemTemplate>

<AlternatingItemTemplate>

<td class="grid_nums"><span class="grid_pound">#</span><asp:Label runat="server" ID="lblSimilarSongSerialNo"></asp:Label></td>

<td class="grid_song_alt">

<asp:HyperLink ID="songName" runat="server" Text='<%# Eval("Name") %>'></asp:HyperLink>

</td>

<td class="grid_btns_alt">

 

<asp:HyperLink runat="server" ID="lnkPlaySong" NavigateUrl='<%# Eval("Url") %>' >

<img src="/Bell.Sympatico.CMS/Images/inDiscover/btn_play.gif" alt="play" width="18" height="19" border="0" />

</asp:HyperLink>

 

<asp:HyperLink runat="server" ID="lnkAddToPlayList">

<img src="/Bell.Sympatico.CMS/Images/inDiscover/btn_playlist.gif" alt="Add To Playlist" width="18" height="19" border="0" />

</asp:HyperLink>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="lnkAddToPlayList" PopupControlID="Panel1" Position="Bottom" />

</td>

</AlternatingItemTemplate>

</asp:DataList>
......

<div id="Panel1" runat="server" class="popup_table">

<uc2:AddToPlaylist id="addToPlaylist2" runat="server"></uc2:AddToPlaylist>

</div>

---- I put the popup control in a user control, the code of uc2 is like following:

<%

@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="Microsoft.Web.UI" TagPrefix="asp" %>

<%

@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<

div style="Z-INDEX:999;" class="popup_container">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan="2" class="popup_title"><asp:Label ID="pnl1Title" runat="server" Text=""></asp:Label>

<asp:TextBox id="hidSongID" style="width:1px;visibility:hidden;" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td class="popup_dropdown">

<asp:DropDownList ID="ddlPlaylist" runat="server" ></asp:DropDownList>

</td>

<td class="popup_submitbtn"><asp:Button ID="btnAddToPlaylist" runat="server" Text="Add to Playlist" OnClick="btnAddToPlaylist_Click" /></td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</

div>

I'm experiencing this behavior as well

Yes, I am getting the same effect. I was really confused because the toolkit sample works great, but did not work well at all on my page.

My page does have a scrollbar and that is the only thing I could think of. Hopefully, this will be fixed soon. I was really looking forward to using a calendar using this popup control.

 

Thanks.

I was having these same issues with the popup control as well. I finally gave up and figured the pop up control needs A LOT of work before it is usable. I ended up using the animation extender to have a div fade and and fade out. There's a javascript function in the sample site that aligns your div with the control that is displaying your "pop up".

Do you have a DOCTYPE declaration on your page? I had the same problem before I put a DOCTYPE on my page, because IE6/7 render the page in quirks mode without the doctype.

I believe that the problem lies in that the popup control does not take into account a scroll offset.  I agree with some of the comments that this library needs some work, but that is why we are here on the bleeding edge...to help make it better.

 Here is what I did to fix:

1. Add this function to AjaxControlToolkit\Common\Common.js (I added it after getClientBounds)

 getClientScrollOffset : function() {
        /// <summary>
        /// Gets how much the page has scrolled.
        /// </summary>
        /// <returns type="Array">
        /// Scrolled x and y values for the browser window.
        /// </returns>

        var x,y;
        if (window['pageYOffset'] != undefined) // all except Explorer
        {
            x = window.pageXOffset;
            y = window.pageYOffset;
        }
        else if (document.documentElement && document.documentElement['scrollTop'] != undefined)
        // Explorer 6 Strict
        {
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        }
        else if (document.body) // all other Explorers
        {
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }
        return [x, y];
    },

 2. Modify a section of the show function in AjaxControlToolkit\PopupControl\PopupControlBehavior.js (specifically, I added the "var scrollOffsetX"... line and modified the "if (newPosition.x + newPosition.width"... section)
 

...

        var documentWidth = self.innerWidth ? self.innerWidth : document.documentElement.clientWidth;
        var scrollOffsetX = CommonToolkitScripts.getClientScrollOffset()[0];
        // CONSIDER: Create a generic function to return this information.
        if (!documentWidth) {
            documentWidth = document.body.clientWidth;
        }
        if (newPosition.x + newPosition.width > (documentWidth + scrollOffsetX - 5)) {
            position.x -= newPosition.x + newPosition.width - documentWidth - scrollOffsetX + 5;
            updateNeeded = true;
        }
        if (newPosition.x < 0) {
            position.x -= newPosition.x;
            updateNeeded = true;
        }
        if (newPosition.y < 0) {
            position.y -= newPosition.y;
            updateNeeded = true;
        }

... 

This seems to work for me, but please provide feedback.

I had two problems with the fix.  One was that it did not account for a vertical scroll, and the other was that my browser returned (0, 0) for documentElement.scrollLeft and documentElement.scrollTop.  My fix was to adjust the position before setLocation is called.  I also wanted to limit my fix to a single file so that I can re-apply the fix easlily.

 if (window['pageYOffset'] != undefined) // all except Explorer
{
    position.x += window.pageXOffset;
    position.y += window.pageYOffset;
}
else if (document.body) // all other Explorers
{
    position.x += document.body.scrollLeft;
    position.y += document.body.scrollTop;
}
CommonToolkitScripts.setLocation(elt, position);

SplendidCRM:

I had two problems with the fix.  One was that it did not account for a vertical scroll, and the other was that my browser returned (0, 0) for documentElement.scrollLeft and documentElement.scrollTop.  My fix was to adjust the position before setLocation is called.  I also wanted to limit my fix to a single file so that I can re-apply the fix easlily.

 if (window['pageYOffset'] != undefined) // all except Explorer
{
    position.x += window.pageXOffset;
    position.y += window.pageYOffset;
}
else if (document.body) // all other Explorers
{
    position.x += document.body.scrollLeft;
    position.y += document.body.scrollTop;
}
CommonToolkitScripts.setLocation(elt, position);

 

I had the exact same problem, but i experienced problems mainly in ie 6. After trying your fix i got problems in mozilla as well, so what i did was to remove the first if and add a third (or a second one) and then it worked in both ff, ie6 and most others that i tested.

 

Here is how:

 

if (document.body) // all other Explorers
{
    position.x += document.body.scrollLeft;
    position.y += document.body.scrollTop;
}
else if (document.documentElement)
{
    //IE6 standards compliant mode
    position.y += document.documentElement.scrollTop;
    position.x += document.documentElement.scrollLeft;
}

 

SplendidCRM and lintan

I get the code you have both posted but can you show me an example of how you incorporated it into the common.js file to make it work. My popups are fine as well till you scroll then it is anyone guys where they come up. I would like to add more Ajax things to my pages but I am stopped by working as designed not as desired issues.