10

I am adding a CalendarExtender to a page, using the default styles. When I click the calendar button to trigger the calendar popup, the calendar displays normally. However, when I scroll down and click the button again, the calendar's position is not where it should be, as seen below.

alt text

Why is this occuring and how do I fix it?

EDIT: A bit about the implementation of this page.

The CalendarExtender and TextBox are part of a WebPart added to a SharePoint 2007 Page. I am creating the extender like so:

textBox = new TextBox() { ID = "textBox" };
Controls.Add(textBox);

calendar = new CalendarExtender()
    {
        ID = "ceStartDate",
        TargetControlID = textBox.ID,
        PopupPosition = CalendarPosition.Right,
        PopupButtonID = image.ID
    };
Controls.Add(calendar);
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Kyle Trauberman
  • 25,414
  • 13
  • 85
  • 121

3 Answers3

14

I came across the same problem today.

Wrap your textbox and calendarExtender in a div with position:relative;

That fixed the problem i was facing, i hope it does the trick for you too

Dogoku
  • 4,585
  • 3
  • 24
  • 34
  • 4
    +1: This worked for me. I was having the correct DOCTYPE and I still wondered what could be the problem. Hope that others will explore your answer is the one accepted won't work for them. For me this solution worked on multiple browsers: Chrome, Mozilla, Opera, IE (both 8 and 9). – Coral Doe Aug 21 '12 at 13:59
  • I already had a doctype. And similar styling worked for me. Here is the reference : http://languagelassi.blogspot.in/2012/08/blog-post.html – Language Lassi Mar 20 '13 at 11:23
  • @Dogoku Fine... In our project, we are using JavaScript calender, it's still showing in the bottom position. Please mention if there is any workaround to fix it. – TechDo Oct 15 '13 at 12:42
  • @techdo what do you mean? can you make a new question or give me an example, link, something? – Dogoku Oct 15 '13 at 16:21
  • Perhaps this is only happening to me, but when I wrap it in a relative div as you say, the calendar positioning is correct but the bottom half of the calendar is cut off. I have my textbox and extender wrapped inside the div which is inside a . Does this have something to do with it? – user1422348 May 20 '15 at 04:06
  • Depends on your css. from the sound of it, either that div or a parent of it has `overflow:hidden;` which will cut off any content bigger than itself. Create a question and link it here. Either me or someone else will help you out – Dogoku May 20 '15 at 16:42
6

What is the DOCTYPE of the page? Also, what browser is it? I have seen this issue on pages with invalid/old DOCTYPEs with IE6-7 in Quirks mode.

In quirks mode, javascript values(like scroll position), can be off, resulting in a bad render. You should ensure you have a valid DOCTYPE that forces IE into standards mode like..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Jab
  • 13,713
  • 2
  • 42
  • 48
0

Since this is an old post I found trying to solve this situation for myself (unsuccessful following previous answers), I thought my solution to the same issue might be relevant to others.

  • We where using an outdated version: 3.0.xxx
  • We had to upgrade to latest version: 4.1.xxx

Above versions is the AjaxControlToolkit dll version - not the version you see on NuGet, today the NuGet package ("Ajax Control Toolkit") will be something like 7.xxx.

FYI - My research: I've been using the samples of latest AjaxControlToolkit version to verify if my bug was solved if I upgraded (since I knew exactly how to reproduce my position-issue). At least one of the two sites below should work:

Nick Niebling
  • 317
  • 3
  • 12