CalendarExtender: style

CalendarExtender popup out of position in IE7

Here is the object with its CalendarExtender attached:

When i click on the textbox the calendar pops up high up on the page. This seems to only happen when the page has a scroll bar. I have tried setting the PopupPosition to no avail. I also tried the stylesheet approach:

.CalendarExtender

{

z-index :1001;

}

to no avail as well. When i check this in FireFox all is well.

Any help would be appreciated.

Thanks!

That's pretty odd. I have an idea that there's some broken tag in the html somewhere though. Check the page for invalid HTML in Visual Studio as well as in the browser. IE handles broken tables in an... interesting... manner.

No broken HTML that i can see. This is a page with 6 AJAX tabs on it. All the other tabs work fine, dont have to scroll to see all information, even the date field at the top of this "contacts" tabs works properly.

I am having this problem on a gridview as well. if the gridview requires scrolling and the control to be updated is a little more than a page down and is clicked the calendar pops up on the top of the screen. grrrr... this isnt really a deal breaker for the application, i'm just a stickler for detail.

I feel your pain... I'm just the same when it comes to details...

Try removing the styling from the td to see if that has any affect.

Also, I'd like to see a test like this without a table. Just text & paragraph tags that take up a few pages with textbox's & calendarextenders scattered throughout. I wonder if you'd see this problem without the table. Gridviews also render as tables, so this would be a good experiment.

Also try on a page with _nothing_ else. Stick a really long gridview on a simple ASPX page and put a calendarextender in it to see if you have the same problem.

What version of the toolkit are you using?

Taking out the formatting did nothing. Same thing without table and only <p> tags. *sigh

i am thinking this is just something weird with IE7.

Toolkit version 10920.

Well on the upside this isn't your fault.

Yea that's a real pain. It's obviously an IE7/AJAX Toolkit quirk. I suppose you could a) put up with it b) use a third party control c) submit a bug & wait d) see if you can fix the bug yourself and submit a patch ;)

CalendarExtender Pops up underneath Fixed Grid Header

Hi, i've used CalendarExtender in my page. There is a gridview, whos header is Fixed by style, by setting GridHeader position: "relative" & top: "auto".

Now when I click the calendar image the popup goes underneath the GridHeader. Have anyone encountered this, Or may give a solution?

thanks in advance.

Hi,

Can you show a small self-sufficient sample?

Sure I can, Test this & help me with a solution, Plz.

using System;using System.Data;using System.Collections.Generic;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass _Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) BindData(); }private void BindData() { List<string> data =new List<string>();for (int i = 0; i < 500; i++) data.Add("Data " + i.ToString()); GridView1.DataSource = data; GridView1.DataBind(); }}

Here's the aspx

 1<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>23<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">5<html xmlns="http://www.w3.org/1999/xhtml">6<head runat="server">7 <title>Untitled Page</title>8 <style type="text/css">9 table th10 {11 position: relative;12 top: expression(this.parentNode.parentNode.13 parentNode.scrollTop-1);14 }15</style>16</head>17<body>18 <form id="form1" runat="server">19 <asp:ScriptManager ID="ScriptManager1" runat="server" />20 <div>21 <table>22 <tr>23 <td>24 <asp:TextBox ID="txtFromDate" runat="server" Width="60px"></asp:TextBox>25 <asp:ImageButton runat="Server" ID="imgFromDate"26 AlternateText="Click to show calendar" CausesValidation="false" />27 </td>28 </tr>29 <tr>30 <td align="center">31 <div style="overflow: auto; height: 100px;">32 <asp:GridView ID="GridView1" runat="server">33 <HeaderStyle BackColor="AliceBlue" />34 </asp:GridView>35 </div>36 </td>37 </tr>38 <tr>39 <td>40 <ajaxToolkit:CalendarExtender ID="cbeFromDate" runat="server" PopupButtonID="imgFromDate"41 TargetControlID="txtFromDate" Format="dd/MM/yyyy">42 </ajaxToolkit:CalendarExtender>43 </td>44 </tr>45 </table>46 </div>47 </form>48</body>49</html>

 Thanks for the reply. I thought I'd never get a response.

I found that my calendars were going all over the place until I made the positioning absolute. I just made my whole form absolute so you can try that just to see if it works, that might not be pratical for you so you can try changing only the container for your calendar controls to absolute and maybe that will help.

CalendarExtender padding within Table

Hi,

I have a Textbox/CalendarExtender in a table, whose td style contains "padding:10px;". When I click in the textbox to open the calendar it appears to be all messed up. On further investigation, it appears to be inheriting the padding from my table. When I remove the "padding:10px;" line from my table style, the calendar displays fine. Has anyone any idea how to override this?

Many thanks,

Simon

What if you set the CssClass property for the CalendarExtender and in the class definition, you set the padding on td:s to 0?

Wednesday, March 21, 2012

CalendarExtender popup out of position in IE7

CalendarExtender Pops up underneath Fixed Grid Header

CalendarExtender padding within Table

CalendarExtender

Blog Archive

About Me