asp: UpdateProgress - Presionando el salto de línea

Question

Comencé a trabajar con ASP.net AJAX (finalmente ☺). y tengo un panel de actualización junto con un asp: UpdateProgress. Mi problema: UpdateProgress siempre obliga a un salto de línea, ya que se presenta como una etiqueta div.

¿Hay alguna forma de forzarlo a que sea un lapso? Quiero mostrarlo en la misma línea que algunos otros controles sin tener que usar una tabla o incluso estremecimientos posicionamiento absoluto en CSS.

Estoy atrapado con ASP.net AJAX 1.0 y .NET 3.0 si eso hace la diferencia.

Answer 1

acabo blog acerca de mi propia solución a este problema. http://www.joeaudette.com/solving-the-aspnet-updateprogress-div-problem.aspx

Lo que hice fue tomar prestado el control UpdateProgress del proyecto Mono y lo modifiqué para que se procesara como un span en lugar de div. También copié un modifed el javascript ms-ajax asociado con el control y lo modifiqué para alternar entre visualización: en línea y visualización: ninguno en lugar de usar visualización: bloque

Hay un archivo .zip vinculado en mi publicación que contiene archivos modificados

Answer 2

Se puede hacer una línea div así:

<div style="display:inline">stuff</div> 

Soy escéptico de que la prestación del div para usted, aunque ... No recuerdo haber tenido este problema en mis páginas ...

Answer 3

Tuve el mismo problema. No hay una manera fácil de decirle a la actualización Progreso que se realice en línea. Sería mejor que transfiera su propio elemento updateProgress. Puede agregar un oyente beginRequest y un oyente endRequest para mostrar y ocultar el elemento que desea visualizar en línea. Aquí es simple página que muestra cómo hacerlo:

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 4

simplemente colocar su UpdateProgress dentro de un lapso con un estilo = "position: absolute; "

Answer 5

sólo se aplica a la etiqueta float:left/caja de texto, etc. De esta manera:

en la cabecera:

<style type="text/css"> 
.tbx 
{ 
    float:left; 
} 

en el cuerpo:

<asp:TextBox CssClass="tbx" .... /> 

Answer 6

Una forma mejor y más simple es usar UpdateProgress dentro de UpdatePanel con span. Lo probé y funcionó correctamente en IE, FF, navegadores Chrome. de esta manera:

<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 7

Mi solución fue envolverlo de la siguiente manera ...

<div class="load-inline">LOADER HERE</div> 

Y en mi CSS lo uso ...

.load-inline {display:inline-block} 

Answer 8

Mi solución: En CSS

.progress[style*="display: block;"] { 
    display:inline !important; 
} 

y ASP

<asp:UpdateProgress class="progress" ID="UpdateProgress1" runat="server">