Greetings,
I've come across something with the RadAjaxLoadingPanel that I can't quite figure out. In a nutshell, when I have a CSS class associated with a particular div, the loading panel displays as a small sliver above the targeted ASP:Panel when I click the lone RadButton on my page. If I remove the CSS class from the div then the loading panel displays just fine. Any assistance in helping me figure this one out is greatly appreciated as the page itself is quite simple. Shown below is my CSS, code behind, and markup.
The particular line in my markup that is causing odd behavior reads as shown below. Removing the class completely results in the loading panel displaying as expected when clicking the RadButton.
<div class="formContainer"> <!--Remove CSS from this DIV and the RadAjaxLoadingPanel will display on postback-->
.formContainer{ float:left; margin:-6px 0px 0px 0px; width:450px;}.formContainer input[type=password]{ width:300px;}.formContainer input[type=text]{ padding-left:3px; width:298px;}.formContainer label{ float:left; clear:left; text-align:left; width:130px;}.formContainer textarea{ width:300px;}using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Demo{ public partial class Default : System.Web.UI.Page { protected override void OnLoad(System.EventArgs e) { base.OnLoad(e); } protected void OnLogin(object sender, System.EventArgs e) { try { System.Threading.Thread.Sleep(3000); } catch (System.Exception ex) { } } }}<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %><!doctype html><html><head> <link href="App_Themes/Basic/Style.css" rel="stylesheet" type="text/css" /> <meta charset="utf-8" /> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /> <meta content="width=device-width,initial-scale=1" name="viewport" /> <title>Flowtivity</title></head><body> <form runat="server"> <asp:ScriptManager runat="server" /> <telerik:RadAjaxManager runat="server" ID="MainAjaxManager" DefaultLoadingPanelID="MainLoadingPanel"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="LoginButton"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="MainFormPanel" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="MainFormPanel"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="MainFormPanel" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> <ClientEvents OnRequestStart="onRequestStart" OnResponseEnd="onResponseEnd" /> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel runat="server" ID="MainLoadingPanel" /> <telerik:RadInputManager runat="server" ID="MainInputManager"> <telerik:TextBoxSetting InitializeOnClient="true"> <TargetControls> <telerik:TargetInput ControlID="MainFormPanel" /> </TargetControls> </telerik:TextBoxSetting> </telerik:RadInputManager> <asp:Panel runat="server" ID="MainFormPanel"> <div class="formContainer"> <!--Remove CSS from this DIV and the RadLoadingPanel will display on postback--> <p> <label> Email:</label> <asp:TextBox runat="server" ID="EmailTextBox" Text="" /></p> <p> <label> Password:</label> <asp:TextBox runat="server" ID="PasswordTextBox" TextMode="Password" /></p> </div> </asp:Panel> <div> <telerik:RadButton runat="server" ID="LoginButton" Text="Login" Width="90px" OnClick="OnLogin" OnClientClicking="onLogin" /> </div> <telerik:RadScriptBlock runat="server"> <script type="text/javascript"> function onLogin(sender, e) { } function onRequestStart() { var btn = document.getElementById('<%= LoginButton.ClientID %>'); btn.disabled = true; } function onResponseEnd() { var btn = document.getElementById('<%= LoginButton.ClientID %>'); btn.disabled = false; } </script> </telerik:RadScriptBlock> </form></body></html>1 Answer, 1 is accepted
0
Paul
Top achievements
Rank 1
Rank 1
answered on 26 Sep 2012, 01:48 PM
Please disregard. The issue was caused by the "float" applied via CSS.