Wednesday, March 28, 2012

UpdateProgress Problem

I'd like to show the update progress template in the center of div, which content is updated with update panel. I tried to do it with z-index.. but it works only with absolute positioning so it can be centered only in the whole browser window. What should i do to make it work in the right way? =)

Here is a simple illustration of the feature i need

*****************Update Panel*************
* *

* *

* Loading... *

* *

* *

**********************************************


I have anarticle on creating a modal UpdateProgress. It uses absolute positioning, but you can use relative positioning to position the message within your container. There is ademo available as well... you can use Firebug to mess around a bit with the styles in real-time (just disable the visible=hidden style on the UpdateProgress' main DIV).

Hope this helps.

-Damien


Everything work nice when we use absolute positioning.. but with realtive positioning z-index doesn't work so i failed to put it to foreground.

According tohttp://msdn2.microsoft.com/en-us/library/ms533005.aspx

It is quite possible that relatively positioned elements will overlap with other objects and elements on the page. As with absolute positioning, you can use the z-index attribute to set thez-index of the positioned element relative to other elements that might occupy the same area. By default, a positioned element always has a higher z-coordinate than its parent element so that it will always be on top of its parent element.

I also messed around with the styles on the sample I sent you using FireBug and verified that I was able to set the z-index on a relative positioned element. For example:

#processMessage {

background-color:#FFFFFF;

border:1px solid #000000;

left:43%;

padding:10px;

position:relative;

top:-300px;

width:14%;

z-index:1001;

}

-Damien


You are looking like this one

http://mattberseth.com/blog/2007/06/aspnet_ajax_canceling_an_async_1.html


Thx! Look like it's what i need =)

No comments:

Post a Comment