Laden...

ASP.NET Control Toolkit Calendar Extender wird unter vorhandener TextBox gerendert

Erstellt von dr_d00m vor 15 Jahren Letzter Beitrag vor 15 Jahren 1.071 Views
dr_d00m Themenstarter:in
43 Beiträge seit 2008
vor 15 Jahren
ASP.NET Control Toolkit Calendar Extender wird unter vorhandener TextBox gerendert

Hallo,
ich habe folgendes Problem im Internet Explorer:
Ich benutze eine TextBox und einen ImageButton in Verbindung mit einem CalenderExtender, um einen Date-Time-Picker zu implementieren.
Unter diesem Konstrukt liegt eine TextBox. Die ist per CSS mit einer festen Position (position: absolute😉 versehen.
Jedes Mal wenn ich nun meinen Kalender aufrufe, wird dieser unter der TextBox gerendert. Leider ist es in meinem Fall auch nicht möglich das position: absolute irgendwie zu ersetzen.
der Code dazu sieht wie folgt aus:


<div ID="L_TVDATUM_1" style="position:absolute; top:776px; left:24px; width:121px; height:21px;">
        <table>
        <tr>
            <td>
                <asp:TextBox ID="tbDateTime" runat="server" Height="18" Width="128" 
                    AutoPostBack="false" ontextchanged="tbDateTime_TextChanged"></asp:TextBox>
            </td>
            <td>
                <asp:ImageButton ID="ibCalendar" runat="server" ImageUrl="~/img/calendar.png" Height="22px" />
            </td>
        </tr>
    </table>
<cc1:CalendarExtender ID="tbDateTime_CalendarExtender" runat="server" Enabled="True"
                TargetControlID="tbDateTime" PopupButtonID="ibCalendar" Format="dd.MM.yyyy"  >
            </cc1:CalendarExtender>
      </div>
<div ID="KOSTENSTELLE_1" style="position: absolute; top:856px; left:24px; width:289px; height:21px;">
        <asp:TextBox ID="KOSTENSTELLE" CssClass="Eingabefeld" style="width:289px; background-color:#FF0000;" runat="server" />
      </div>

Ich habe auch verschiedene Lösungen zu dem Problem gefunden:
http://forums.asp.net/t/1071605.aspx
http://forums.asp.net/t/1067281.aspx

Die habe ich in den letzten 1 1/2 Tagen auch kräftig durch probiert. Für den Firefox war das alles kein Problem. Der hat jede Lösung akzeptiert und alles funktioniert. Der Internet Explorer(7) war da leider nicht ganz so freundlich 😉

Kann mir hier vielleicht jemand mit dem Problem weiterhelfen?

Gruß
dr_d00m

N
4.644 Beiträge seit 2004
vor 15 Jahren

Hast Du mal den Z-Index der unteren TextBox auf -1 gesetzt. Ich hab es probiert und es funktioniert im IE7.

dr_d00m Themenstarter:in
43 Beiträge seit 2008
vor 15 Jahren

Jo, danke für die Antwort. Genau das hab ich gestern abend auch noch probiert. Das funktioniert tatsächlich. Leider wird die Seite von einem selbst gebauten Programm erzeugt und daher ist es nicht so einfach die z-Indexe aller Elemente unter einem Kalender auf -1 zu setzen. Ich werd jetzt ein Javascript schreiben, dass mir beim eintreten von OnClientShowing des Kalenders den z-Index aller Elemente auf -1 setzt und bei OnClientHiding wieder auf auto.
Wenns fertig ist lass ich mal verlauten, ob es geklappt hat...

Gruß
dr_d00m

dr_d00m Themenstarter:in
43 Beiträge seit 2008
vor 15 Jahren

Das ist echt zum verzweifeln. Ich hab ein Javascript, das mir alle z-Indexe auf -1 setzt außer das des umschließenden Div meines Kalenders und trotzdem erscheint er noch hinter der TextBox...
Hier mal der Code zum JavaScript:


function setAllZIndexesLow(cal) {
    var elementsInForm = document.getElementById(theForm.id).elements;
    
    var dtpDiv = document.getElementById(cal + "_1");

    for (var i = 0; i < elementsInForm.length; i++) {
        if (elementsInForm[i] != dtpDiv) {
            elementsInForm[i].style.zIndex = -1;
        }
    }
}

Die Funktion wird ausgeführt beim OnClientClick des Buttons. OnClientShowing vom Kalender hat irgendwie nicht so recht funktioniert. Das Property OnClientClick setze ich im CodeBehind, damit ich die ID des Divs finden kann (fehlt nur noch "_1"). Damit kan ich dann das umschließende Div rauslassen.

Bei OnClientHiding des Kalenders wird folgende Funktion ausgeführt:


function setAllZIndexesAuto() {
    var elementsInForm = document.getElementById(theForm.id).elements;
    for (var i = 0; i < elementsInForm.length; i++) {
        elementsInForm[i].style.zIndex = "auto";
    } 
}

Beim debuggen (mit Visual Studio) sehe ich auch, dass alle Elemente anscheinend den z-Index -1 haben. Schau ich mir die Elemente hinterher mit der IE Developer Toolbar an, ist ihr z-Index allerdings nicht gesetzt.

Wo ist der Fehler? Ich bin grad echt am verzweifeln...

Gruß
dr_d00m