Jon's Blog

I ran into an issue the other day where my UpdateProgress control (an animated GIF) would display behind any div that was using the DropShadowExtender control from the AJAX Control Toolkit.  In order to fix this issue I set the CSS class on the div of the UpateProgress to "postion: fixed" and the "z-index" to an arbitrarily high number.

This is before the CSS change.  Notice the animated GIF just peeking out from the end of the drop shadow at the bottom right of this image.

And here is what it looks like after the CSS change.  The animated GIF now displays properly in front of the div using the drop shadow.

CSS:

div.divProgress { z-index: 1001; position: fixed; }

ASPX:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtk" %>

<ajaxtk:DropShadowExtender id="dse" runat="server" TargetControlID="divPanel"
        TrackPosition="true" />
    <div id="divPanel" runat="server" class="Box">
        <div class="BoxHeader">This Is My Header</div>
        <div>
            <p>Text here. More Text. Whoa. Etc...</p>

             <p>
                <asp:Button ID="btnDoSomething" runat="server" Text="Do Something" 
                     onclick="btnDoSomething_Click" />
             </p>
        </div>
    </div>

    <ajaxtk:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender" runat="server" 
        TargetControlID="updateProgress" HorizontalSide="Center" VerticalSide="Middle"  />
    <asp:UpdateProgress ID="updateProgress" runat="server" DynamicLayout="true" >
        <ProgressTemplate>
            <div class="divProgress" id="divProgress" runat="server" align="center">
                <img src="~/images/red_rotation.gif" id="imgUpdateProgress" 
                  runat="server" alt="Please Wait..." />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>