locked
Trouble displaying UpdatePanel and ProgressContent in-line with button and label RRS feed

  • Question

  • User615288127 posted

    I'm using Visual Studio 2015 with SQL Server 2014, VB.

    I have the code below but can't figure out how to display the button, label and updateprogresscontent all in one single line.  Everything I've tried always places the progresscontent on the line below the button and label.  As I have numerous iterations of this to display on one page the extra line space takes up needed room.  What I have works fine except for that extra line space.  Does anybody know how I can change this to accomplish my goal, and even if it's possible?

    Thanks in advance!

            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
    
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>        
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                        &nbsp;        
                    <asp:Label ID="Label1" runat="server" Text="Capacitors"></asp:Label>
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                        <ProgressTemplate>
                                <script type="text/javascript">
                                    document.write("<div class='UpdateProgressBackground'></div>");</script>
                                <div class="UpdateProgressContent"                                    
                                        style="background-color: #FFFFFF; font-weight: bold; left: 572px; height: 29px;">
                                    Capacitor export in process...
                                <asp:Image id="CapWaitCap" runat="server" ImageUrl="~/Images/progress.gif"/>
                                </div>
                            </ProgressTemplate>
                    </asp:UpdateProgress>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
    Monday, January 15, 2018 4:20 PM

Answers

  • User2103319870 posted

    Wrap your update progress control inside a div and set its display property to inline block. You also need to increase the width of Fieldset to accomodate the lenth of whole string

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset style="width:550px;">
                        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Style="width: 56px" />
                        &nbsp;        
                    <asp:Label ID="Label1" runat="server" Text="Capacitors"></asp:Label>
                        <div style="display: inline-block">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <ProgressTemplate>
                                    <script type="text/javascript">
                                        document.write("<div class='UpdateProgressBackground'></div>");</script>
                                    <span class="UpdateProgressContent"
                                        style="background-color: #FFFFFF; font-weight: bold; left: 572px; height: 29px;">Capacitor export in process...
                                <asp:Image ID="CapWaitCap" runat="server" ImageUrl="~/Images/progress.gif" />
                                    </span>
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </div>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>

    Change the FieldSet width as per your design

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 15, 2018 5:18 PM

All replies

  • User2103319870 posted

    Wrap your update progress control inside a div and set its display property to inline block. You also need to increase the width of Fieldset to accomodate the lenth of whole string

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset style="width:550px;">
                        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" Style="width: 56px" />
                        &nbsp;        
                    <asp:Label ID="Label1" runat="server" Text="Capacitors"></asp:Label>
                        <div style="display: inline-block">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <ProgressTemplate>
                                    <script type="text/javascript">
                                        document.write("<div class='UpdateProgressBackground'></div>");</script>
                                    <span class="UpdateProgressContent"
                                        style="background-color: #FFFFFF; font-weight: bold; left: 572px; height: 29px;">Capacitor export in process...
                                <asp:Image ID="CapWaitCap" runat="server" ImageUrl="~/Images/progress.gif" />
                                    </span>
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </div>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>

    Change the FieldSet width as per your design

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 15, 2018 5:18 PM
  • User615288127 posted

    Thanks a2h,

    That works like a charm!

    Monday, January 15, 2018 7:07 PM