RadAjaxLoadingPanel left align issue

4 posts, 0 answers
  1. Matt
    Matt avatar
    32 posts
    Member since:
    May 2013

    Posted 26 Aug 2014 Link to this post

    Greetings,

    I was struggling earlier to figure out why my loading panel was not showing.  I inherited an application and was trying to Ajaxify it.  One of my Loading Panels would not show up even though it was doing a lengthy post-back.  I discovered that having align="left" on a table tag (I know, not good practice) causes the loading panel to disappear.  Here is a sample...

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %>
     
    <html>
      <head runat="server">
        <title>Loading Panel Sample</title>
      </head>
      <body>
        <form id="form1" runat="server">
          <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
                                  Width="350">
              <table border="1" width="350">
                <tr>
                  <td>
                    <h2>
                      Loading Panel Will Show
                    </h2>
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    <telerik:RadButton ID="RadButton1" runat="server" Text="Post Me" OnClick="RadButton1_Click">
                    </telerik:RadButton>
                  </td>
                </tr>
              </table>
            </telerik:RadAjaxPanel>
            <br />
            <br />
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel2">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel2"
                                  Width="350">
              <table align="left" border="1" width="350">
                <tr>
                  <td>
                    <h2>
                      Loading Panel Will Not Show
                    </h2>
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    filler...
                  </td>
                </tr>
                <tr>
                  <td>
                    <telerik:RadButton ID="RadButton2" runat="server" Text="Post Me" OnClick="RadButton2_Click">
                    </telerik:RadButton>
                  </td>
                </tr>
              </table>
            </telerik:RadAjaxPanel>
          </div>
        </form>
      </body>
    </html>

    using System;
    public partial class Sample : System.Web.UI.Page
    {
      protected void Page_Load(object sender, EventArgs e)
      {
      }
     
      protected void RadButton1_Click(object sender, EventArgs e)
      {
        System.Threading.Thread.Sleep(1000);
      }
     
      protected void RadButton2_Click(object sender, EventArgs e)
      {
        System.Threading.Thread.Sleep(1000);
      }
    }

    I removed the left alignment from the table tags and now working great.  Just wanted to share in case somebody else has this issue.

    Matt
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 29 Aug 2014 Link to this post

    Hello,

    Does this mean that the loading panel appears after you remove align="left" from the table tag? What I can suggest you is to try setting Skin property of RadAjaxPanel to some of the build in skins and see if this will help you show the loading panel.
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Vista">
    </telerik:RadAjaxLoadingPanel>

    Regards,
    Pavlina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    32 posts
    Member since:
    May 2013

    Posted 29 Aug 2014 in reply to Pavlina Link to this post

    Yes, the loading panel appears after removing align="left" from the table tag.  Adding a skin property to the loading panel did not help.

    Since I am cleaning up somebody else's code, I removed that tag and applied CSS instead.  Everything is working fine now.  I was just reporting this in case others come across the same issue.  It took quite a bit of time to figure out what was wrong with my application.

    Thanks!

    Matt
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 03 Sep 2014 Link to this post

    Hello,

    Thank you for sharing your findings with the community.

    Regards,
    Pavlina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top