Why Does UpdateProgress Always Render a DIV?
Posted in Development
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
UpdateProgresstake a whole row. - Float
UpdateProgresswhich, 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
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?
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
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.
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?