Wednesday, March 28, 2012

UpdateProgress render inline option?

UpdateProgress always seems to render the contents of <ProgressTemplate> on a new line. Any simple way to have that render inline where it is placed?

You can to do this using css styles.

<styletype="text/css">
#updateProgress1
{
display:inline;
}
</style>

Make sure that the ID of your progress control is updateProgress1.

I could see that working except that the ID of my Progress control gets some extra naming container ID's attached to it. Not being a CSS master I wonder if it were wrapped with another DIV that displayed inline shouldn't that take care of it?


Yes you can do something like that.

<div id="enclosure">
<atlas:updateprogress ... >
</div>

You can use selector as follows

#enclosure div
{
display: inline;
}


The above suggestion doesn't seem to work - as the UpdateProgress DIV is styled inline (varying between "display:none" and "display:block") - the inline "display:block" overrides the stylesheet setting.

Best soultion I could come up with was to use the following code:

<p><span class="progress"> <atlas:UpdateProgress ID="updateProgress" runat="server"> <ProgressTemplate> <img id="Img1" runat="server" src="~/Images/Progress.gif" /> Updating... </ProgressTemplate></atlas:UpdateProgress></span><asp:Button ID="testButton" runat="server" Text="Refresh" /></p>  
span.progress{ position: absoulte; left:100px;}

Using,position:absolute will take the 'progress' span out of the document flow, thus not affecting other page elements. Setting just the "left" position will move the image across from the button (which is less than 100 pxels wide)

This is by no means elegant, but achieves a goal. (and it assumes you have spare space to the left of your update button).

Other variations on this soultion could place the update indicator at the top left/right of the screen - (something like gmail does)

Would be much better if the UpdateProgress control could rendereither as a Block or Inline element!

Alternatively to all of this, you could wrap the button and Progess control in a 2 cell table...


It would be good if a RenderMode property could be added to UpdateProgress in the same way as the UpdatePanel.

The RenderMode property can be either Inline or Block, and that causes it to either output a wrapper <span> or <div> accordingly.

Just seems that the UpdateProgress is missing that property (not in July 2006 CTP anyway)

Daniel.


Actually I have just tried enclosing the UpdateProgress with a span as so:-

<span class="progress"> <atlas:UpdateProgress runat="server" ID="up1"> <ProgressTemplate> <asp:Image ID="Image1" runat="server" ImageUrl="~/images/wait.gif" /> </ProgressTemplate> </atlas:UpdateProgress></span>
 and used
span.progress div{display: inline;}
 
which works fine (July CTP).

I have it working without the inline, a float: left; did the trick.

span.progress div
{
float:left;
}

No comments:

Post a Comment