<p>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.</p>

<p>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 <em>shudders</em> absolute positioning in CSS.</p>

<p>I'm stuck with ASP.net AJAX 1.0 and .net 3.0 if that makes a difference.</p>

[{'answer_id': 42521, 'author': 'Ben Scheirman', 'author_id': 3381, 'author_profile': 'https://Stackoverflow.com/users/3381', 'pm_score': -1, 'selected': False, 'text': '<p>You can make a div inline like this:</p>\n\n<pre><code>&lt;div style="display:inline"&gt;stuff&lt;/div&gt;\n</code></pre>\n\n<p>I\'m skeptical of it rendering the div for you though...  I don\'t remember having this problem on my pages...</p>\n'}, {'answer_id': 43825, 'author': 'Steven Williams', 'author_id': 3294, 'author_profile': 'https://Stackoverflow.com/users/3294', 'pm_score': 3, 'selected': False, 'text': '<p>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:</p>\n\n<p><strong>aspx</strong></p>\n\n<pre><code>&lt;form id="form1" runat="server"&gt;\n    &lt;div&gt;\n        &lt;asp:ScriptManager ID="sm" runat="server"&gt;&lt;/asp:ScriptManager&gt;\n\n\n    &lt;asp:UpdatePanel runat="server" ID="up1" UpdateMode="Always"&gt;\n        &lt;ContentTemplate&gt;\n            &lt;asp:Label ID="lblTest" runat="server"&gt;&lt;/asp:Label&gt;\n            &lt;asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_OnClick" /&gt;\n        &lt;/ContentTemplate&gt;    \n    &lt;/asp:UpdatePanel&gt;\n    &lt;img id="loadingImg" src="../../../images/loading.gif" style="display:none;"/&gt;&lt;span&gt;Some Inline text&lt;/span&gt;\n\n    &lt;script&gt;\n\n        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(sender, args) {\n            if (args.get_postBackElement().id == "btnTest") {\n                document.getElementById("loadingImg").style.display = "inline";\n            }\n        });\n\n\n        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {\n            if (document.getElementById("loadingImg").style.display != "none") {\n                document.getElementById("loadingImg").style.display = "none";\n            }\n        });\n\n    &lt;/script&gt;\n\n    &lt;/div&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p><strong>cs</strong></p>\n\n<pre><code>public partial class updateProgressTest : System.Web.UI.Page\n{\n    protected void btnTest_OnClick(object sender, EventArgs e)\n    {\n        System.Threading.Thread.Sleep(1000);\n        this.lblTest.Text = "I was changed on the server! Yay!";\n    }\n}\n</code></pre>\n'}, {'answer_id': 207705, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 3, 'selected': False, 'text': '<p>simply place your UpdateProgress inside a span with style="position:absolute;"</p>\n'}, {'answer_id': 1433511, 'author': 'Adiel', 'author_id': 85045, 'author_profile': 'https://Stackoverflow.com/users/85045', 'pm_score': 0, 'selected': False, 'text': '<p>Just apply <code>float:left</code> to your label/textbox etc. \nLike this:</p>\n\n<p>in the header:</p>\n\n<pre><code>&lt;style type="text/css"&gt;\n.tbx \n{\n    float:left;\n}\n</code></pre>\n\n<p>in the body:</p>\n\n<pre><code>&lt;asp:TextBox CssClass="tbx" .... /&gt;\n</code></pre>\n'}, {'answer_id': 1701994, 'author': 'user174456', 'author_id': 174456, 'author_profile': 'https://Stackoverflow.com/users/174456', 'pm_score': 3, 'selected': True, 'text': '<p>I just blogged about my own solution to this problem.\n<a href="http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx" rel="nofollow noreferrer">http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx</a></p>\n\n<p>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</p>\n\n<p>There is a .zip file linked in my post which contains the modified files.</p>\n'}, {'answer_id': 6813411, 'author': 'hamed aj', 'author_id': 552223, 'author_profile': 'https://Stackoverflow.com/users/552223', 'pm_score': 1, 'selected': False, 'text': '<p>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:</p>\n\n<pre><code>&lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"&gt;\n    &lt;ContentTemplate&gt;\n        ..........\n        &lt;span style="position:absolute;"&gt;\n            &lt;asp:UpdateProgress ID="UpdateProgress1" runat="server"\n                AssociatedUpdatePanelID="UpdatePanel1"&gt;\n                    &lt;ProgressTemplate&gt;\n                        &lt;img alt="please wait..."src="/Images/progress-dots.gif" /&gt;\n                    &lt;/ProgressTemplate&gt;\n            &lt;/asp:UpdateProgress&gt; \n        &lt;/span&gt; \n    &lt;/ContentTemplate&gt;\n&lt;/asp:UpdatePanel&gt;\n</code></pre>\n'}, {'answer_id': 7034438, 'author': 'Adam Youngers', 'author_id': 798420, 'author_profile': 'https://Stackoverflow.com/users/798420', 'pm_score': 0, 'selected': False, 'text': '<p>My solution was to wrap it as follows...</p>\n\n<pre><code>&lt;div class="load-inline"&gt;LOADER HERE&lt;/div&gt;\n</code></pre>\n\n<p>And in my CSS I use...</p>\n\n<pre><code>.load-inline {display:inline-block}\n</code></pre>\n'}, {'answer_id': 28278793, 'author': 'Hammer', 'author_id': 4520128, 'author_profile': 'https://Stackoverflow.com/users/4520128', 'pm_score': 2, 'selected': False, 'text': '<p>My solution:\nIn CSS</p>\n\n<pre><code>.progress[style*="display: block;"] {\n     display:inline !important;\n}\n</code></pre>\n\n<p>And ASP</p>\n\n<pre><code>&lt;asp:UpdateProgress  class="progress" ID="UpdateProgress1" runat="server"&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/42499', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/91/']