MaskedEditValidator and CalendarExtender display problem w/ IE

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » MaskedEditValidator and CalendarExtender display problem w/ IE

Shortcuts

Previous Next

MaskedEditValidator and CalendarExtender display problem w/ IE

Last post 04-02-2009 4:17 AM by Zhi-Qiang Ni - MSFT. 1 replies.

Sort Posts:

MaskedEditValidator and CalendarExtender display problem w/ IE

03-31-2009, 10:43 AM

Contact

point Member
jk-aopc
Member since 03-31-2009, 2:00 PM
Posts 1

Please take a look at the sample page at the bottom of this post. (There is nothing worthwhile in the code behind.)

When viewing this page with Firefox, Safari or Opera, the page behaves correctly. However, when viewing the page with IE6 or IE7, after clicking the image to show the calendar popup, the select list will get shifted down in the page. I have determined that if I remove the MaskedEditValidator from its location in the page (either to outside that div or remove it entirely), the caledar popup will NOT shift the select list, at least with IE7.

The obvious workaround is to move the MaskedEditValidator, since it's not being displayed anyway. However, I was planning to wrap all of these controls into a single control that can be reused across our site, so I will have to keep the controls together.

We are using the ASP.NET 2.0 version of build 20229, but as far as i can tell, neither the CalendarExtender's nor the MaskedEditValidator's code has changed since this version.

On a side note, I also viewed this page with IE8 and the content didn't shift down, but the top of the calendar popup appeared halfway up the text box instead of below it.

Thanks!

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" />
            <div>
                <span style="white-space: nowrap;">
                    <asp:TextBox ID="DateTextBox" runat="server" Columns="10" MaxLength="10" />
                    <ajaxtoolkit:MaskedEditExtender ID="DateTextBoxMaskExtender" runat="server" TargetControlID="DateTextBox" Mask="99/99/9999" MaskType="Date" ClearTextOnInvalid="true" ClearMaskOnLostFocus="false" />
                    <ajaxtoolkit:MaskedEditValidator runat="server" ControlToValidate="DateTextBox" ControlExtender="DateTextBoxMaskExtender" IsValidEmpty="true" Display="None" />
                    <asp:ImageButton ID="ToggleImage" runat="server" ImageUrl="~/DatePickerButton.gif" ImageAlign="AbsMiddle" />
                    <ajaxtoolkit:CalendarExtender runat="server" TargetControlID="DateTextBox" PopupButtonID="ToggleImage" PopupPosition="BottomLeft" />
                </span>
            </div>
            <div>
                <asp:DropDownList runat="server">
                    <asp:ListItem Text="Test" />
                </asp:DropDownList>
            </div>
        </form>
    </body>
</html>

Re: MaskedEditValidator and CalendarExtender display problem w/ IE

04-02-2009, 4:17 AM

Contact

Answer

26,107 point All-Star
Zhi-Qiang Ni - MSFT
Member since 04-11-2008, 12:37 AM
Posts 2,342

Hi jk-aopc,

As you noticed, the MaskedEditValidator’s validation information would expand the container and then disappear. Thus, the spacing is held between the TextBox and the DropDownList.

To resolve this issue, we can place the associated controls inside the page directly without any DIV container.

Here is the sample:

            <strong>Enter Date (format: <em>99/99/9999</em>):</strong>
        <br />
        <asp:TextBox ID="TextBox5" runat="server" Width="130px" MaxLength="1" style="text-align:justify" ValidationGroup="MKE" />
        <asp:ImageButton ID="ImgBntCalc" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" CausesValidation="False" />
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender5" runat="server"
            TargetControlID="TextBox5"
            Mask="99/99/9999"
            MessageValidatorTip="true"
            OnFocusCssClass="MaskedEditFocus"
            OnInvalidCssClass="MaskedEditError"
            MaskType="Date"
            DisplayMoney="Left"
            AcceptNegative="Left"
            ErrorTooltipEnabled="True" />
        <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator5" runat="server"
            ControlExtender="MaskedEditExtender5"
            ControlToValidate="TextBox5"
            EmptyValueMessage="Date is required"
            InvalidValueMessage="Date is invalid"
            Display="Dynamic"
            TooltipMessage="Input a date"
            EmptyValueBlurredText="*"
            InvalidValueBlurredMessage="*"
            ValidationGroup="MKE" />
         <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox5" PopupButtonID="ImgBntCalc" />
        
        
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem Text="Test" />
            </asp:DropDownList>
        </div>

Best regards,

Zhi-Qiang Ni

Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.

Page 1 of 1 (2 items)

RSS Available