Making Update Progress Panel in the center

Question

I have a query regarding update progress panel. I want to fit update progress panel in the middle of my screen, Can anyone suggest me? what is the idea of making it so??

Answer 1

You can do that by using css

<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
.CenterPB{
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>

and you have the progress bar in the div

<div class="CenterPB" style="height:60px;width:60px;" >Progress bar here</div>

reference:
http://www.sitepoint.com/forums/1243542-post9.html
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/

Answer 2

The update progress panel displays something (some text an image some markup) while the system is processing..

So you need to work with the markup you add..

For example if you have a div that displays you could get it to be in the centre like this..

<div style="width:200px;margin:0 auto;">Processing...</div>

That will display the div in the centre of its container.

Full example:

<asp:UpdatePanel ID="updatepnl1" runat="server">
    <ContentTemplate>
        <asp:GridView id="gv1" runat="server">
        </asp:GridView>
        <asp:UpdateProgress id="UpdateProg" runat="server">
            <ProgressTemplate>
                <div style="width:200px;margin:0 auto;">Processing...</div>
            </ProgressTemplate>
        </asp:UpdateTemplate>
    </asp:ContentTemplate>
</asp:UpdatePanel>

Of course you should put the css into a css file and apply it to a class.

Like:

///Start css

.posCentre{width:200px;margin:0 auto;}

///End css

and change your div to:

<div class="posCentre">Processing...</div>

Answer 3

If you use jQuery, you may also try (very lightweight) fixedcenter plugin .