CODEWITHSUNDEEP
asp.netasp.net-ajax
acadia
acadia

Reputation: 2621

Display Ajax UpdateProgress in the middle of the Page

I am using the Ajax UpdateProgress control. Though it is working just as I expected it to work, I want it to appear at the center of the page. How do I do that

<asp:UpdateProgress runat="server"
      id="PageUpdateProgress" DisplayAfter=0
      DynamicLayout=true>
   <ProgressTemplate>
      <div>
         <img src="../Images/load.gif" />           
     </div>
   </ProgressTemplate>
</asp:UpdateProgress>

Upvotes: 5

Views: 45816

Answers (8)

yonel
yonel

Reputation: 21

I used in my project this code.

The ASPX :

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100" DynamicLayout="true" >
  <ProgressTemplate>
    <div class="update">
    </div>
  </ProgressTemplate>
</asp:UpdateProgress>

The CSS :

/* UPDATEPANEL PROGRESS : masque lors du chargement des résultats */
.update
{
position: fixed;
top: 0px;
left: 0px;
min-height: 100%;
min-width: 100%;
background-image: url("Images/Loading.gif");
background-position:center center;
background-repeat:no-repeat;
background-color: #e4e4e6;
z-index: 500 !important;
opacity: 0.8;
overflow: hidden;
}

Upvotes: 1

Aeyd Moeyd
Aeyd Moeyd

Reputation: 11

I have tried this code and it works in IE and Chrome:

        <asp:UpdateProgress runat="server">
            <ProgressTemplate>
                <div class="Modal">
                    <img src="/img/load.gif" class="Loadin" />
                </div>
                <style>
                    .Modal {
                        position: fixed;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(6, 0, 137, 0.40);
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                    .Loadin {
                        position: relative;
                        top: 50%;
                        right: 50%;
                    }
                </style>
            </ProgressTemplate>
        </asp:UpdateProgress>

Upvotes: 0

Duke
Duke

Reputation: 11

Set your CSS properties as percentages.

In the second div:

  1. Set background-image: url('[Path to your image]').
  2. Set top, left, height, width accordingly; top = (100-height)/2, left = (100-width)/2

In both divs, check the z-index is set above other content.

Works in IE...

<asp:UpdateProgress ID="updateProgress" runat="server" DynamicLayout="true">
    <ProgressTemplate>

            <div style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; padding: 0; margin: 0; background-color: #F0F0F0; filter: alpha(opacity=50); opacity: 0.5; z-index: 100000;"></div>

            <div style="position: fixed; top: 40%; left: 40%; height:20%; width:20%; z-index: 100001;  background-color: #FFFFFF; border:2px solid #000000; background-image: url('../../Images/ajax-loader-big.gif'); background-repeat: no-repeat; background-position:center;"></div>

        </ProgressTemplate>
</asp:UpdateProgress>

Upvotes: 1

Spyder
Spyder

Reputation: 4062

Thanks Jaidev, Very handy post!

It can take a while to get the css just right, so just to simplify the solution for everyone else, you only need the following (for updateprogress middle-positioning):

<div style="position:absolute; width:100%;height:100%;"></div>

and for the image:

<img style="position:relative; top:45%;" />

Upvotes: 9

Dickson
Dickson

Reputation: 11

Use ModalPpoupExtender and set the target control to the update progress

<cc1:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="PageUpdateProgress"
            PopupControlID="PageUpdateProgress" BackgroundCssClass="modalback" runat="server">
        </cc1:ModalPopupExtender>

Upvotes: 1

Micke
Micke

Reputation: 1

You could also use UpdatePanelAnimationExtender, i.g. to deactivate control which fired a submit event.

Upvotes: 0

Ravi Joshi
Ravi Joshi

Reputation: 11

Try this:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate >
        <div id="dvProgress" runat="server" style="position:absolute; top: 300px;
                                                   left: 550px; text-align:center;">
            <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" 
                       ImageUrl="~/App_Themes/Default/Images/wait_ax.gif"  />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Upvotes: 1

Jaidev Khatri
Jaidev Khatri

Reputation: 61

use this style in your div:

style="position:absolute;visibility:visible;border:none;z-index:100;width:100%;height:100%;background:#999;filter: alpha(opacity=80);-moz-opacity:.8; opacity:.8;"

and use this style in your img:

style="top:48%; left:42%; position:relative;"

Upvotes: 6

Related Questions