I attach the content of my form inside panel with ScrollBars set to "Auto" and Height and Width are specified. In my form, I have a date textbox with PopupControlExtender to show Calendar. If the date textbox is placed in the bottom of the form (so that we need to scroll the panel to view the textbox), and then I click the textbox (to popup the calendar), the calendar is shown in the position below the textbox position before scrolled.
Is there any way to make the popup follow the position of the textbox if the textbox is scolled up or down ?
Please help...

When I try this, the PopupControl simply pops up partially outside the visible region. I scroll the page to bring it into view and it scrolls with the textbox like I'd expect. Maybe if you posted a simple sample of what you're talking about?

Sorry for the reply delay. Here's my code:

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="CodeBehind.aspx.cs" Inherits="CodeBehind" MasterPageFile="SomeMasterPage.master" %>

<%

@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlastoolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</atlas:ScriptManager>

<asp:Panel ID="Panel1" runat="server" Height="100px" Width="300px" ScrollBars="Auto">

<br />
Some Content so the textbox is not visible without scrolling
<br />
Some Content
<br />
<br />
Some Content
<br />
<br />
Some Content
<br />
<br />
Some Content
<br />
<br />
Some Content
<br />
<br />
<asp:TextBox ID="DateField" runat="server" Width="200px"></asp:TextBox>
<asp:Panel ID="DatePanel" runat="server" Width="203px" HorizontalAlign="Left">
<div style="border: 1px outset white; z-index: 1000;">
<atlas:UpdatePanel ID="DateUpdatePanel" runat="server" Mode="Conditional">
<ContentTemplate>

<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="350px">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
</asp:Calendar>

<atlastoolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlastoolkit:PopupControlProperties TargetControlID="DateField" PopupControlID="DatePanel" Position="Bottom" OffsetX="2" />
</atlastoolkit:PopupControlExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</div>
</asp:Panel>

</asp:Panel>

</asp:Content>

Because of the content of Panel 1 exceed the height of Panel1, the scoll will be visible & I have to scroll down to view the textbox. When I scroll down and click to the textbox, the popup calendar will be shown at the position before the panel is scrolled or the position if the panel has no scrolls. So in other words, the popup don't follow the textbox (as the popupcontrol target) when it's scrolled to the visible  area in the panel..

Please anyone help me.. Sorry for my bad english though.

It doesn't work for me quite the way you describe, but I think I see what you're getting at. My simple suggestion would be to position the Popup above the TextBox instead of below it to avoid the issue entirely. Failing that, a simple poll-and-fix approach (as outlined in other posts to this forum) might be able to quickly correct the issue when it happens. (Briefly, set a timer to fire a short while after the popup pops and have it correct the position.) Hope this helps!

Hai David, thank you so much for your reply..I'm just curious,I've tested AutoCompleteExtender & PopupControlExtender,Do those controls not follow the position of their target control? Do they not check the current position of target textbox before popup is displayed? Any reason why?

May be you should check AutoSuggestBox (ASB) (http://www.autosuggestbox.com). This control will cleverly follow it's target textbox by setting the position of layer before it's shown, according to it's target textbox.

Please forgive my stupidity, but any suggestion how to set a timer to fire a short while after the popup pops ?

Thank You so much for your time.

PopupControl does look at the position of its TargetControlID and position itself accordingly before popping up. Check out the this._onFocus method of PopupControlBehavior.js for the code. Regarding the timer approach, SBurke outlined something like what I had in mind to try in this thread: http://forums.asp.net/thread/1277969.aspx. Hope this helps!

I have the same issue.  I have a panel that's supposed to appear below a text box when an imagebutton is clicked (I'm making a combo box).  When I scroll down the page and click the image, the panel appears way above where it should.  It only happens when the controls are in a contentpage of a masterpage setup.  It works fine in Firefox but not IE.  If anyone knows a hack for a temporary fix that'd be great.  I'm just not enough of a CSS wiz to figure this one out.

Hello,

I had the same issue too. However the position of my PopupPanel was wrong when scrolling right (the popup appears in ModalPopup which appears when editing GridView - and GridView is very wide). Here is the code:

 

1    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">      
2    	<ContentTemplate>  
3    	       <asp:Panel ID="Edycja_danych" runat="server" CssClass="modalBox" Style="display: none; position: relative;" Width="560px">
4    		<div class="divCol">
5                            	           Etap postępowania</div>
6                              <div class="divColLast">                              
7                            	<asp:UpdatePanel runat="server" ID="UpdatePanel3" UpdateMode="Conditional">      
8                                         <ContentTemplate>
9                                                 <asp:TextBox ID="txtEtap" runat="server" Width="250" autocomplete="off" ReadOnly="True" style=""></asp:TextBox>
10                                               <asp:Panel ID="DropPanel" runat="server" CssClass="popupControl" Style="display :none;">
11                                                   <asp:UpdatePanel runat="server" ID="up1">      
12                                                       <ContentTemplate>
13                                                           <asp:RadioButtonList ID="RadioButtonList3" AutoPostBack="true" runat="server" style="display: none; width: 450px; font-weight: normal;" OnSelectedIndexChanged="RadioButtonList3_SelectedIndexChanged"></asp:RadioButtonList>
14                                                       </ContentTemplate>
15                                                   </asp:UpdatePanel>
16                                               </asp:Panel>
17                                               <cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
18                                               TargetControlID="txtEtap"
19                                               PopupControlID="DropPanel"
20                                               Position="Bottom"
21                                               />
22                                       </ContentTemplate>
23                             </asp:UpdatePanel>
24                             </div>
25                             <div class="clearer">
26                             </div>
27   	       </asp:Panel>   
28                   <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none; position: relative;"/>
29                   <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"  
30                   	TargetControlID="hiddenTargetControlForModalPopup"
31                           PopupControlID="Edycja_danych"
32                           CancelControlID="Cancel"
33                           PopupDragHandleControlID="Tytul_panelu_edycji"
34                           DropShadow="true"
35                   />
36   	</ContentTemplate>
37   </asp:UpdatePanel>

Important here is fact that I had to set "display: none;" to both DropPanel and RadioButtonList3 to make it work using the script provided below

I found a soultion somewhere but unfortunatelly some modifications to AJAXToolKit source were needed. I didn't have VS2005 to do those so I had to invent my own solution ;]

After 3 days here it is (finally):

Just add this javascript to your page: (it will run every 1ms) 

  
1    "javascript" type="text/javascript">
2    3            function change_popup_offset()
4            {
5                var droppanel = $get('DropPanel');
6                var element = $get('RadioButtonList3');
7                if (element) element.style.display = 'none';  
8                if (droppanel)
9                {
10                  droppanel.style.position = 'absolute';
11                  droppanel.style.left = '270px';
12               }
13               if ((element)&&(droppanel)&&(droppanel.style.display != 'none')&&(droppanel.style.left == '270px'))
14               {
15                  element.style.display = 'block';
16                  element.style.borderWidth = '2px';
17      	       element.style.borderStyle = 'outset';
18      	       element.style.borderColor = 'Blue';
19               }
20          }
21                  
22          setInterval('change_popup_offset()', 1); 
23   // -->
24   

btw, about using this forum: I don't know why, but when I add two codes to a text I write here, I can't edit the secode code at all ;/ So below is the corrected second code. Important here is the fact that all visual style formating of RadioButtonList3 must be done within this code !

 

 

<script language="javascript" type="text/javascript">
<!--
           function change_popup_offset()
           {
               var droppanel = $get('DropPanel');
               var element = $get('RadioButtonList3');
               if (element) element.style.display = 'none';  
               if (droppanel)
               {
                  droppanel.style.position = 'absolute';
                  droppanel.style.left = '270px';
               }
               if ((element)&&(droppanel)&&(droppanel.style.display != 'none')&&(droppanel.style.left == '270px'))
               {
                  element.style.display = 'block';
                  element.style.borderWidth = '2px';
      	          element.style.borderStyle = 'outset';
      	          element.style.borderColor = 'Blue';
               }
           }
                  
           setInterval('change_popup_offset()', 1); 
// -->
</script>