Why Does UpdateProgress Always Render a DIV?

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. ;)

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?

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

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

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.

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.

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?

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

try surround the UpdateProgress with span, i.e.

i.e.

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

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

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