Showing posts with label div. Show all posts
Showing posts with label div. Show all posts

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 =)

UpdateProgress Renders Differently in IE7

I am using an update progress control which contains an animated gif and then some text below. The style on the DIV creates a box around it. It renders fine in IE6 but IE7 the Please Wait...shows up outside the box...any suggestions? Here is the code and css style:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<Div class="wdeProgressIndicator">
<img src="http://pics.10026.com/?src=images/progressbar.gif" alt="Please Wait..." />
Please Wait...
</Div>
</ProgressTemplate>
</asp:UpdateProgress>

background-color: #ffffff;
margin: auto;
height: 10px;
width: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -5px;
border-right: #5d7b9d thin solid;
border-top: #5d7b9d thin solid;
border-left: #5d7b9d thin solid;
border-bottom: #5d7b9d thin solid;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 10px;

If i do the following it works fine, so there has to be more html in the page, that is manipulating something. In any case, why not make the image a background-image on the div with the css, and rmeove the image tag all together, so the image is just part of the div anyway.

<html>
<style>
.wdeProgressIndicator{
background-color: #ffffff;
margin: auto;
height: 10px;
width: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -5px;
border-right: #5d7b9d thin solid;
border-top: #5d7b9d thin solid;
border-left: #5d7b9d thin solid;
border-bottom: #5d7b9d thin solid;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 10px;
}
</style>

<body>
<Div class="wdeProgressIndicator">
<img src="http://pics.10026.com/?src=images/progressbar.gif" alt="Please Wait..." />
Please Wait...
</Div>
</body>
</html>


Good suggestion..thanks. That seems to work for now.