This is a migrated thread and some comments may be shown as answers.

[Solved] Loading Panel not appearing over inline Composite Control in IE8

2 Answers 154 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

Accepted

answered on 07 Aug 2009, 09:00 AM

Hello Rodrigo,

I tested a similar scenario and found out that if the composite control uses a <span> as a wrapper element, its offsetHeight property returns 0 in IE8 if the <span> element contains an inline-block <div> (the date picker). Please use a <div> element for a wrapper of your composite control. Moreover, placing <div>s inside <span>s is not correct anyway.

ASPX

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Namespace="MyNameSpace" TagPrefix="my" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" /> 
        
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="Button1"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="MyCompositeControl1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManager> 
        
            <my:MyCompositeControl ID="MyCompositeControl1" runat="server" /> 
        
            <asp:Button ID="Button1" runat="server" Text="AJAX" /> 
        
            </form> 
        
            </body> 
        
            </html>

In App_Code

    
            using System; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Web; 
        
            using System.Web.Security; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            using System.Web.UI.HtmlControls; 
        
            using Telerik.Web.UI; 
        
            namespace MyNameSpace 
        
            { 
        
                public class MyCompositeControl : WebControl 
        
                { 
        
                    protected override void OnInit(EventArgs e) 
        
                    { 
        
                        base.OnInit(e); 
        
                        CheckBox chk = new CheckBox(); 
        
                        chk.ID = "CheckBox1"; 
        
                        chk.Text = "check"; 
        
                        RadDatePicker rdp = new RadDatePicker(); 
        
                        rdp.ID = "RadDatePicker1"; 
        
                        this.Controls.Add(chk); 
        
                        this.Controls.Add(rdp); 
        
                    } 
        
                    protected override HtmlTextWriterTag TagKey 
        
                    { 
        
                        get 
        
                        { 
        
                            return HtmlTextWriterTag.Div; 
        
                        } 
        
                    } 
        
                } 
        
            }

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 07 Aug 2009, 12:46 PM

Thank's Dimo! :-)

I've added

    
            Controls.Add(new Literal() { Text = "<div id=\"IE8_compatibility\">" }); 
        
            Controls.Add(_chk); // Checkbox

            Controls.Add(_rdp); // RAdDatePicker

            Controls.Add(new Literal() { Text = "</div>" });

and it works perfectly :-)

By the way, as far as I know (but I'm new at this), span tag should be used with text only :-)

Thanks, once agaun.

Yours sincerely,

Rodrigo Selada