ASP.NET AJAX Control Toolkit anpassen / Bug in Positionierung des ModalPopupExtender

Möchte man den ModalPopupExtender aus dem ASP.NET AJAX Control Toolkit ver­wen­den, dann geht das nur mit dem DOCTYPE "XHTML 1.0 Transitional" so rich­tig rei­bungs­los. Beim CollapsiblePanel gibt es dazu einen Hinweis in der Dokumentation, beim ModalPopup fehlt die­ser Hinweis. Das Problem besteht aber auch dort.

Symptome: Das Popup wird nicht kor­rekt posi­tio­niert, zen­triert sich nicht und viel zu lange Scrollbalken entstehen.

Gerade wenn man WebParts für SharePoint erstellt, hat man aber nicht immer Einfluss auf den DOCTYPE. Oder wenn man schon Einfluss auf den DOCTYPE hat, kann man ihn nicht immer ein­fach so ändern, weil dann evtl. andere Komponenten nicht mehr rich­tig funk­tio­nie­ren oder nicht mehr rich­tig dar­ge­stellt werden.

Der beschrie­bene Workaround aus der Dokumentation des AJAX Control Toolkit fällt damit als Lösung für uns aus.

Ein ande­rer Lösungsweg ist, ein Custom Build des ASP.NET AJAX Control Toolkit zu erstel­len und darin das "feh­ler­hafte" Stück JavaScript zu korrigieren.

Dazu besorgt man sich den Quellcode via Codeplex und nimmt die fol­gen­den zwei Modifkationen vor:

• AjaxControlToolkit\Common\Common.js 
  • Darin sucht man nach "getClientBounds" und ersetzt das in der Funktion ent­hal­tene SWITCH Statement durch fol­gen­des:

            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;
            }

    Diese Modifikation bringt dem Toolkit bei, Höhe und Breite ein biss­chen bes­ser auszulesen. 

    Achtung:

    Hat man bereits an ande­ren Stellen im eige­nen Code Anpassungen auf­grund die­ses Problems vor­ge­nom­men, indem man z.B. via CSS oder JavaScript nach­träg­lich die Position eines AutoComplete Feldes kor­ri­giert, so ist dies jetzt mög­li­cher­weise nicht mehr not­wen­dig und/oder funk­tio­niert nicht mehr rich­tig. Hier also noch­mal kontrollieren!

• AjaxControlToolkit\ModalPopupExtender\ModalPopupBehavior.js 
  • Dort in der "initia­lize" Funktion fol­gende Ersetzungen vor­neh­men: 

    this._backgroundElement.style.position = 'fixed';

     erset­zen zu

    this._backgroundElement.style.position = 'absolute';//'fixed';

    Ein paar Zeilen wei­ter unten:

    his._foregroundElement.style.position = 'fixed';

    erset­zen zu

    this._foregroundElement.style.position = 'absolute';//'fixed';

    Diese Modifikation beein­flusst andere Controls nicht, und sorgt nur für die ordent­li­che Positionierung des Popups.

Außerdem zu beachten:

Wenn man das Control Toolkit mit dem mit­ge­lie­fer­ten Schlüssel kom­pi­liert, so wir der selbe PublicKeyToken wie beim Original erzeugt. Daraus ent­stünde dann mög­li­cher­weise fol­gen­des Problem:

Verwenden andere Komponenten auf dem Server auch das AJAX Control Toolkit, so bekom­men sie die oben vor­ge­nom­me­nen Änderungen durch­ge­reicht, sofern sie nicht expli­zit gegen eine bestimmte Version kom­pi­liert wurden.

Man sollte also lie­ber einen neuen PublicKeyToken erzeu­gen, um mög­li­chen Kompatibilitätsproblemen im Voraus zu entgehen.

Quelle:

Ramesh Bhaskar - Fixing modal­po­pupex­ten­der posi­tion problems