Why Does UpdateProgress Always Render a DIV?

Posted on February 27, 2007  |  

Posted in Development

13 comments

Here’s a bit of a predicament with the Microsoft AJAX UpdateProgress control: it always renders a DIV.

DIV is a block-level element and therefore makes things complicated if you want to display a humble rotating pizza (aka “progress indicator”) inline.

The bummer is UpdateProgress derives from Control, which does not have any UI features and doesn’t allow application of CSS. I tried to wrap the progress panel itself in a DIV with display: inline, but it doesn’t help. Upon an AJAX callback, the progress panel receives the display: block CSS rule which makes it visible, and display: none upon callback completion, which renders my inlining attempt useless.

Then I tried to apply display: inline to everything inside the progress panel with div.progress_wrapper * { display: inline; }, but this rule is overwritten for the same reason as above.

Looks like the only thing you can do with the progress panel content is position it absolutely via position: absolute, but then you need to decide where on the screen to put it because an absolutely positioned element is taken out of the page flow (see this discussion of containing blocks).

I think a much wiser decision would’ve been to let the developer/designer decide what goes into the progress template. I may want to display a small animated image or I may want to get funky and slap a DIV with some bling-bling. It should be my decision.

Conclusion

The way I see it, we have three options:

  • Suck it up and let UpdateProgress take a whole row.
  • Float UpdateProgress which, inevitably, will lead to floating other elements, and that will get messy fast.
  • Absolutely position it. Not too practical, unless the location is picked carefully.

Update: after I wrote this post, I realized there was an opportunity there. Stay tuned. In a day or two I’ll publish an extender control which positions a progress indicator right in the middle of the browser window. It even goes over list controls in Internet Explorer 6! UpdateProgress has become useful again. ;)

13 comments

Shane Shepherd
on February 27, 2007

Milan, I had noticed this problem too. Your idea to create an extender would be VERY useful. I would also like to be able to put an UpdatProgress control on GridView rows in edit mode for the Update Command. Have you seen anyone do something like that?


Milan Negovan
on February 27, 2007

No, not with stock AJAX controls. We do it with Telerik ones, though. They automatically size the update panel so it covers the row.


Eilon
on February 27, 2007

Hi,
I have a couple of suggestions:
1. Use the UpdateProgress' DynamicLayout property. I think that if you set it, you can place inline elements inside it and they might work.

2. Since the UpdateProgress control is fairly simple, you could write your own fairly easily. You can download the source code for all of ASP.NET AJAX from here: http://ajax.asp.net/downloads/default.aspx?tabid=47 . Read the source license carefully, but you can see that the concept is quite straight forward.

Thanks,
Eilon


Milan Negovan
on February 27, 2007

Eilon, with "DynamicLayout=true" the panel is hidden via "visibility: hidden", i.e. the panel will take up space even when inactive, but the content won't be shown. I don't know about having an empty white box sitting in the middle of my page. :)

As a matter of fact, I've already written an extender which attaches to any Panel control and positions it dead-center during each AJAX request/response sequence. I'll share it soon.


Caterwomtious
on February 28, 2007

You could use a control adapter to get rid of (or change) the div. I've been using them to tidy up MOSS 2007's field controls, and they work well.


VBAHole
on June 7, 2007

I'm having a similar issue where I have a large datagrid on the screen and if a user scrolls down and clicks on it then my progress panel is up at the top of the page and no longer visible.

I'd like to move the progress panel to where ever the user happened to click. Can this be done?


Milan Negovan
on June 7, 2007

Yes. Take a look at this: Always Centered AJAX Progress Indicator


oshiko
on January 24, 2008

try surround the UpdateProgress with span, i.e.


oshiko
on January 24, 2008

i.e.

[lt;]span style="position:absolute;" [gt;][lt;]asp:UpdateProgress....[gt;][lt;]/span[gt;]

note: [lt;] = less than sign, [gt;] = greater than sign


Chad
on February 22, 2008

oshiko: thanks for the suggestion. Worked like a charm!


Jason
on March 27, 2009

Old thread, but why not this? It works for me.

.Progress * { display:inline !Important;}
.Progress { display:inline;}


Jason
on March 27, 2009

Sorry,

".Progress" being the class name of your wrapper DIV. Be sure to set DynamicLayout="false" of the progress control.


Dave
on November 17, 2010

@Jason,

That worked great. Thanks a lot.