asp: UpdateProgress - surpressing the line-break

Question

J'ai commencé à travailler avec ASP.net AJAX (enfin ☺). et j'ai un panneau de mise à jour avec un asp: UpdateProgress. Mon problème: UpdateProgress force toujours un saut de ligne, car il se présente comme un div-tag.

Existe-t-il un moyen de forcer à la place? Je veux l'afficher sur la même ligne que d'autres contrôles sans avoir à utiliser une table ou même shudders positionnement absolu en CSS. Je suis coincé avec ASP.net AJAX 1.0 et .net 3.0 si cela fait une différence.

Answer 1

Je viens blogué sur mon solution à ce problème. Ce que j'ai fait, c'est emprunter le contrôle UpdateProgress du projet Mono et l'avoir modifié pour le rendre en span au lieu d'un div. J'ai aussi copié une modification du ms-ajax javascript associé au contrôle et l'ai modifié pour basculer entre display: inline et display: none au lieu d'utiliser display: block

Un fichier .zip est lié dans mon post qui contient le fichiers modifiés.

Answer 2

Vous pouvez faire une ligne div comme ceci:

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

Je suis sceptique de ce qui rend le div pour vous si ... Je ne me souviens pas avoir ce problème sur mes pages ...

Answer 3

J'ai eu le même problème. Il n'y a aucun moyen facile de dire à updateProgress de rendre en ligne. Vous feriez mieux de lancer votre propre élément updateProgress. Vous pouvez ajouter un écouteur beginRequest et un écouteur endRequest pour afficher et masquer l'élément que vous souhaitez afficher en ligne. Voici la page simple qui montre comment le faire:

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

placez simplement votre UpdateProgress l'intérieur d'une portée avec style = "position: absolute; "

Answer 5

Il suffit d'appliquer float:left à votre étiquette/etc textbox Comme ceci:

dans l'en-tête:

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

dans le corps:

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

Answer 6

Une manière plus simple et plus efficace est d'utiliser UpdateProgress dans UpdatePanel avec span. J'ai testé cela et fonctionne correctement dans IE, FF, navigateurs Chrome. comme ceci:

<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

Ma solution a été de l'envelopper comme suit ...

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

Et dans mon CSS J'utilise ...

.load-inline {display:inline-block} 

Answer 8

Ma solution: En CSS

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

Et ASP

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