ASP.NET AJAX Control Toolkit

Re: ModalPopup problem with DOCTYPE

MNF — Mon, 01 Sep 2008 11:08:03 GMT

I am very disappointed, that the work item closed, but not fixed.
It took me time to identify the bug in getClientBounds.

Re: ModalPopup problem with DOCTYPE

jesal — Mon, 07 Jul 2008 18:11:25 GMT

MarkusEm and umer_farooq80 - Thanks a lot! The solution worked like a charm.

Although, as bass4g0d mentioned, I'm still having that infinite scroll-bar issue in IE6 using the following doctype -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Re: ModalPopup problem with DOCTYPE

HeatherGebbia — Thu, 13 Mar 2008 00:51:17 GMT

Hi, I'm having the same problem, has anyone posted the .dll file with the changes that we could use?

Re: ModalPopup problem with DOCTYPE

ad_dc — Tue, 04 Mar 2008 13:37:57 GMT

well , can you post the .dll that you use ? I mean the (AjaxControlToolkit.dll) file so I can use it , also if you want can you post a simple page ??

thanks in advance

umer_farooq80:
I encountered the same problem and was unable to find the fix to problem. So i start doing it myself. In case of IE7 and DocType HTML 4.0 Modelpopup was unable to place itself in middle.
The problem i detected was not in the modelpopup but was in the common function to get the document bounds (getClientBounds in Common.js). In case of IE7 it was unable to find document.documentElement.clientWidth. So i changed this function to following

getClientBounds : function() {
        /// <summary>
        /// Gets the width and height of the browser client window (excluding scrollbars)
        /// </summary>
        /// <returns type="Sys.UI.Bounds">
        /// Browser's client width and height
        /// </returns>

        var clientWidth;
        var clientHeight;
        switch(Sys.Browser.agent) {
            case Sys.Browser.InternetExplorer:
                if (document.documentElement && document.documentElement.clientWidth)
                    clientWidth = document.documentElement.clientWidth;
                else if (document.body)
                    clientWidth = document.body.clientWidth;
                //clientWidth = document.documentElement.clientWidth;
                if (document.documentElement && document.documentElement.clientHeight)
                    clientHeight = document.documentElement.clientHeight;
                else if (document.body)
                    clientHeight = document.body.clientHeight;
                //clientHeight = document.documentElement.clientHeight;
                break;
            case Sys.Browser.Safari:
                clientWidth = window.innerWidth;
                clientHeight = window.innerHeight;
                break;
            case Sys.Browser.Opera:
                clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                break;
            default: // Sys.Browser.Firefox, etc.
                clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                break;
        }
        return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);
    },

This fix is working well for IE7 and Firefox 2.0 in case if DOCTYPE HTML 4.0 transitional as well as in XHTML 1.0 Transitional.

Re: ModalPopup problem with DOCTYPE

onskee — Wed, 28 Nov 2007 15:48:45 GMT

Confirmed Markus -- Your code works for me too.

Thanks.

Re: ModalPopup problem with DOCTYPE

kosmosniks — Tue, 06 Nov 2007 10:24:30 GMT

Hi, I managed to find my way on to this forum due to the modalpopup that display's in top left corner and I read through the doctype issue stipulated above, and realised that I had my stylsheet reference between the page reference and the !Doctype reference:

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="DudeTest.aspx.cs" Inherits="LinkOneParts.DudeTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

so I moved it to my header so that the page reference and the doctype had nothing beetween them and Bingo.. It solved my Modal popup and dsiplayed it n the center!

Best Regards

Re: ModalPopup problem with DOCTYPE

azh_ali — Fri, 02 Nov 2007 16:29:46 GMT

I am having same issue as well and can not change DocType.

I need to use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> or no doctype.

Any solution or idea ?

Re: ModalPopup problem with DOCTYPE

bass4g0d — Mon, 22 Oct 2007 22:59:28 GMT

I've downloaded the latest version from Codeplex and applied the supplied fixed. For this issue everything is ok but now, just on IE, i have extra scroll when opening the modal.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I'm using the doc type due to the usage of several controls including skmmenu that on works ok with HTML 4.0 Transitional.

Any ideas?

Re: ModalPopup problem with DOCTYPE

j4y — Wed, 10 Oct 2007 19:37:41 GMT

Also note:

Any html comments before the doctype in IE 7 seem to force quirks mode.

Re: ModalPopup problem with DOCTYPE

MarkusEm — Mon, 25 Jun 2007 09:14:32 GMT

I found the problem and fixed it on my own.

Here the complete solution to get the modal popup working without Doctype:

Use umer_farooq80's fix to get Modal popup centered:

//Edit getClientBounds in Common.js
getClientBounds : function() {
        /// <summary>
        /// Gets the width and height of the browser client window (excluding scrollbars)
        /// </summary>
        /// <returns type="Sys.UI.Bounds">
        /// Browser's client width and height
        /// </returns>

        var clientWidth;
        var clientHeight;
        switch(Sys.Browser.agent) {
            case Sys.Browser.InternetExplorer:
                if (document.documentElement && document.documentElement.clientWidth)
                    clientWidth = document.documentElement.clientWidth;
                else if (document.body)
                    clientWidth = document.body.clientWidth;
                //clientWidth = document.documentElement.clientWidth;
                if (document.documentElement && document.documentElement.clientHeight)
                    clientHeight = document.documentElement.clientHeight;
                else if (document.body)
                    clientHeight = document.body.clientHeight;
                //clientHeight = document.documentElement.clientHeight;                
                break;
            case Sys.Browser.Safari:
                clientWidth = window.innerWidth;
                clientHeight = window.innerHeight;
                break;
            case Sys.Browser.Opera:
                clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                break;
            default:  // Sys.Browser.Firefox, etc.
                clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                break;
        }
        return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);
    },

Then update initialize in ModalPopupBehavior.js (change 'fixed' to 'absolute'):

initialize : function() {
        /// <summary>
        /// Initialize the behavior
        /// </summary>

        /*
            <div superpopup - drag container resizable><div -- drag handle\dropshadow foreground></div></div>
        */
        AjaxControlToolkit.ModalPopupBehavior.callBaseMethod(this, 'initialize');
        this._isIE6 = (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7);
        if(this._PopupDragHandleControlID)
            this._dragHandleElement = $get(this._PopupDragHandleControlID);

        this._popupElement = $get(this._PopupControlID);
        if(this._DropShadow)
        {
            this._foregroundElement = document.createElement('div');
            this._popupElement.parentNode.appendChild(this._foregroundElement);
            this._foregroundElement.appendChild(this._popupElement);
        }
        else
        {
            this._foregroundElement = $get(this._PopupControlID);
        }
        this._backgroundElement = document.createElement('div');
        this._backgroundElement.style.display = 'none';
        this._backgroundElement.style.position = 'absolute';//'fixed';
        this._backgroundElement.style.left = '0px';
        this._backgroundElement.style.top = '0px';
        // Want zIndex to big enough that the background sits above everything else
        // CSS 2.1 defines no bounds for the <integer> type, so pick arbitrarily
        this._backgroundElement.style.zIndex = 10000;
        if (this._BackgroundCssClass) {
            this._backgroundElement.className = this._BackgroundCssClass;
        }
        this._foregroundElement.parentNode.appendChild(this._backgroundElement);

        this._foregroundElement.style.display = 'none';
        this._foregroundElement.style.position = 'fixed';
        this._foregroundElement.style.zIndex = $common.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;

        this._showHandler = Function.createDelegate(this, this._onShow);
        $addHandler(this.get_element(), 'click', this._showHandler);

        if (this._OkControlID) {
            this._okHandler = Function.createDelegate(this, this._onOk);
            $addHandler($get(this._OkControlID), 'click', this._okHandler);
        }

        if (this._CancelControlID) {
            this._cancelHandler = Function.createDelegate(this, this._onCancel);
            $addHandler($get(this._CancelControlID), 'click', this._cancelHandler);
        }

        this._scrollHandler = Function.createDelegate(this, this._onLayout);
        this._resizeHandler = Function.createDelegate(this, this._onLayout);

        // Need to know when partial updates complete
        this.registerPartialUpdateEvents();
    },

Re: ModalPopup problem with DOCTYPE

MarkusEm — Sat, 23 Jun 2007 13:10:37 GMT

Hi,

unfortunatly i can't use XHTML, because i also use a component (Intersoft webgrid), that doesn't work with XHTML.

This component requires No Doctype or HTML 4.0.

If there is a way to get the popup running with Doctype HTML 4.0 there must be a way to get the modal background working, too.

I'm grateful for any help.

Re: ModalPopup problem with DOCTYPE

kirtid — Fri, 22 Jun 2007 19:00:35 GMT

The Toolkit does not support quirks mode. You should use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

From the CollapsiblePanel demo:

Note: CollapsiblePanel assumes that the standard CSS box model is being used. Early versions of Internet Explorer didn't support that model completely, so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE's standards-compliant mode.

Same applies to the ModalPopup as well.

Re: ModalPopup problem with DOCTYPE

MarkusEm — Fri, 22 Jun 2007 18:32:01 GMT

Hi,

i had the same problem annd used your code to fix it.

Unfortunatly it only fixed the problem in parts.

After overwriting the function getClientBounds in Common.js with your code the popup apperars in the middle of the screen (without it apperar top, left), but not modal.

The grey background starts after the last control on my website. It doesn't get on top.

Is there any other function to update? Any other ideas?

Thanks in advance.

Re: ModalPopup problem with DOCTYPE

imbmay — Thu, 24 May 2007 20:37:20 GMT

Thanks for posting this, worked a charm.

Re: ModalPopup problem with DOCTYPE

umer_farooq80 — Wed, 18 Apr 2007 12:28:06 GMT

I encountered the same problem and was unable to find the fix to problem. So i start doing it myself. In case of IE7 and DocType HTML 4.0 Modelpopup was unable to place itself in middle.

The problem i detected was not in the modelpopup but was in the common function to get the document bounds (getClientBounds in Common.js). In case of IE7 it was unable to find document.documentElement.clientWidth. So i changed this function to following

getClientBounds : function() {
        /// <summary>
        /// Gets the width and height of the browser client window (excluding scrollbars)
        /// </summary>
        /// <returns type="Sys.UI.Bounds">
        /// Browser's client width and height
        /// </returns>

        var clientWidth;
        var clientHeight;
        switch(Sys.Browser.agent) {
            case Sys.Browser.InternetExplorer:
                if (document.documentElement && document.documentElement.clientWidth)
                    clientWidth = document.documentElement.clientWidth;
                else if (document.body)
                    clientWidth = document.body.clientWidth;
                //clientWidth = document.documentElement.clientWidth;
                if (document.documentElement && document.documentElement.clientHeight)
                    clientHeight = document.documentElement.clientHeight;
                else if (document.body)
                    clientHeight = document.body.clientHeight;
                //clientHeight = document.documentElement.clientHeight;
                break;
            case Sys.Browser.Safari:
                clientWidth = window.innerWidth;
                clientHeight = window.innerHeight;
                break;
            case Sys.Browser.Opera:
                clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                break;
            default: // Sys.Browser.Firefox, etc.
                clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                break;
        }
        return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);
    },

This fix is working well for IE7 and Firefox 2.0 in case if DOCTYPE HTML 4.0 transitional as well as in XHTML 1.0 Transitional.