asp:UpdateProgress - suppressing the line-break - asp.net

Question

I've started working with ASP.net AJAX (finally ☺). and I've got an update panel together with a asp:UpdateProgress. My Problem: The UpdateProgress always forces a line-break, because it renders out as a div-tag.
Is there any way to force it being a span instead? I want to display it on the same line as some other controls without having to use a table or even shudders absolute positioning in CSS.
I'm stuck with ASP.net AJAX 1.0 and .net 3.0 if that makes a difference.

Answer 1

simply place your UpdateProgress inside a span with style="position:absolute;"

Answer 2

I've had the same issue. There is no easy way to tell the updateProgress to render inline. You would be better off to roll your own updateProgress element. You can add a beginRequest listener and endRequest listener to show and hide the element you want to display inline. Here is simple page which shows how to do it:
aspx
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="up1" UpdateMode="Always">
<ContentTemplate>
<asp:Label ID="lblTest" runat="server"></asp:Label>
<asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_OnClick" />
</ContentTemplate>
</asp:UpdatePanel>
<img id="loadingImg" src="../../../images/loading.gif" style="display:none;"/><span>Some Inline text</span>
<script>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {
if (args.get_postBackElement().id == "btnTest") {
document.getElementById("loadingImg").style.display = "inline";
}
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
if (document.getElementById("loadingImg").style.display != "none") {
document.getElementById("loadingImg").style.display = "none";
}
});
</script>
</div>
</form>
cs
public partial class updateProgressTest : System.Web.UI.Page
{
protected void btnTest_OnClick(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
this.lblTest.Text = "I was changed on the server! Yay!";
}
}

Answer 3

My solution:
In CSS
.progress[style*="display: block;"] {
display:inline !important;
}
And ASP
<asp:UpdateProgress class="progress" ID="UpdateProgress1" runat="server">

Answer 4

I just blogged about my own solution to this problem.
http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx
What I did was borrow the UpdateProgress control from the Mono project and modified it to render as a span instead of a div. I also copied an modifed the ms-ajax javascript associated with the control and modified it to toggle between display:inline and display:none instead of using display:block
There is a .zip file linked in my post which contains the modified files.

Answer 5

A better and simplest way is use UpdateProgress inside UpdatePanel with span. I've tested this and work properly in IE, FF, Chrome browsers. like this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
..........
<span style="position:absolute;">
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img alt="please wait..."src="/Images/progress-dots.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</span>
</ContentTemplate>
</asp:UpdatePanel>

Answer 6

My solution was to wrap it as follows...
<div class="load-inline">LOADER HERE</div>
And in my CSS I use...
.load-inline {display:inline-block}

Answer 7

Just apply float:left to your label/textbox etc.
Like this:
in the header:
<style type="text/css">
.tbx
{
float:left;
}
in the body:
<asp:TextBox CssClass="tbx" .... />

Answer 8

You can make a div inline like this:
<div style="display:inline">stuff</div>
I'm skeptical of it rendering the div for you though... I don't remember having this problem on my pages...