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
>