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

[Solved] Firefox vs IE rendering in RadGrid custom module

3 Answers 137 Views

Editor

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

Michael Pullella asked on 03 Mar 2010, 01:32 PM

Hi.

I have a RadEditor to which I have added a custom module called a PropertyBar by using code like the following:

    
                            showDetail: function() {  
        
                                    var selectedElement = this.get_editor().getSelectedElement();  
        
                                    var span = document.createElement("SPAN");  
        
                                    var element = this.get_element();  
        
                                    if (selectedElement.nodeName == "comment") {  
        
                                        if (selectedElement.attributes["commentValue"] != undefined)  
        
                                            span.innerHTML = "Comments Made: " + selectedElement.attributes["commentValue"].value;  
        
                                        element.appendChild(span);  
        
                                    }  
        
                                    element.style.border = "1px solid gray";  
        
                                    element.style.marginTop = "3px";                    }  
        
                            };  
        
                            MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);

In Firefox, the property bar renders properly, ie, it displays the property bar inside the editor, so the text that is to be displayed remaines contained in a set area. In other words, if I have set a hieight of 500 for my editor, and the property bar needed 200px to display what it needed to display, the height of the editor would remain at 500, but the text portion would change to 300, and the property bar would get the remaining 200px

However, in IE, the property bar renders outside the editor, so if there is anything below the editor (which there is), the text just renders on top of the things that are displayed below the editor. Using the same example, if the editor was 500, the property bar needed 200px to display the text that it needed to display, the editable text would get 500px, the property bar would start at 500 and render to 700, and the text that it needed to display would just get written over the objects that were below the editor.

I'm pretty sure this is the classic IE vs Firefox discussion about how divs are rendered that is all over the HTML forums, but I'm not sure, and am further unsure of how to resolve the problem so that both browsers will render the proeperty bar properly.

Any ideas?

3 Answers, 1 is accepted

answered on 05 Mar 2010, 02:10 PM

Hi Michael,

The problem could be due to a missing or not set XHTML DOCTYPE in the page with RadEditor.
Please, make sure that you have XHMTL DOCTYPE as the following one:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

If this does not solve the problem, please open a support ticket and send a sample working project that demonstrates the problem. We will examine it and provide a solution after reproducing the issue on our end.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 05 Mar 2010, 03:53 PM

Hi Rumen... Thanks for your reply.

We are still waiting on our dev licences to be purchases, so I am unable to submit a support ticket and get you the project sample that I put together that will demonstrate the problem... Instead, I will include the aspx page that will demonstrate the problem... If you have a way for me to eMail you the project, I'll be happy to do so.

Thanks
Michael

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %> 
        
            <!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">  
        
                <title></title>  
        
                <style type="text/css">  
        
                    .comment   
        
                    {  
        
                        color:Red;  
        
                    }  
        
                </style> 
        
                <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                </telerik:RadAjaxManager> 
        
                <div>In IE (I'm using v8), if you click on the red text, you'll see the comment text appear.  It overwrites the divs that are below.  In Firefox, it renders properly.</div> 
        
                <p></p>  
        
                <div> 
        
                    <telerik:RadEditor   
        
                        ID="RadEditor1" runat="server" EditModes="Design" Width="100%" AutoResizeHeight="False" Height="500px">  
        
                        <Modules> 
        
                            <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="false" /> 
        
                            <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true" /> 
        
                        </Modules> 
        
                        <Content> 
        
            Here is some text <wl:comment class="comment" commentValue="This is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a commentThis is a comment">!!! CLICK ME !!!!</wl:comment>.   
        
            And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  
        
            And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.    
        
            And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  
        
            And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.    
        
            And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  
        
            And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.  And some more.                                 
        
                        </Content> 
        
                    </telerik:RadEditor> 
        
                    <br /> 
        
                    <div style="background-color:Silver">Lets put this div here</div> 
        
                    <div>Here is some text for the first div.  Here is some text for the first div.  Here is some text for the first div.  Here is some text for the first div.  Here is some text for the first div.  Here is some text for the first div.  </div> 
        
                    <p></p>  
        
                    <div style="background-color:Silver">And another one here</div> 
        
                    <div>Here is some text for the second div.  Here is some text for the second div.  Here is some text for the second div.  Here is some text for the second div.  Here is some text for the second div.  Here is some text for the second div.  </div> 
        
                </div> 
        
                <script type="text/javascript">  
        
                    MyModule = function(element) {  
        
                        MyModule.initializeBase(this, [element]);  
        
                    }  
        
                    MyModule.prototype = {  
        
                        initialize: function() {  
        
                            this._editorPathArray = [];  
        
                            MyModule.callBaseMethod(this, 'initialize');  
        
                            var selfPointer = this;  
        
                            this.get_editor().add_selectionChange(function() { selfPointer.showDetail(); });  
        
                        },  
        
                        dispose: function() {  
        
                            this.clear();  
        
                        },  
        
                        clear: function() {  
        
                            this.get_element().innerHTML = "&nbsp;";  
        
                            this._editorPathArray = [];  
        
                        },  
        
                        //A method that does the actual work - it is usually attached to the "selection changed" editor event  
        
                        showDetail: function() {  
        
                            this.clear();  
        
                            var selectedElement = this.get_editor().getSelectedElement();  
        
                            var element = this.get_element();  
        
                            span = document.createElement("SPAN");  
        
                            //                      span.innerHTML = "<table border='1' cellspacing='1' cellpadding='0' width='100%' style='font-family:arial; font-size:8pt'><tr bgcolor='silver'><td width='100'>Attribute</td><td>Value</td></tr>";  
        
                            //                      element.appendChild(span);  
        
                            if (selectedElement.nodeName == "entity" || selectedElement.nodeName == "WL:ENTITY") {  
        
                                if (selectedElement.attributes["commentValue"] != undefined) {  
        
                                    span.innerHTML = "Comments: " + selectedElement.attributes["commentValue"].value;  
        
                                }  
        
                                element.appendChild(span);  
        
                            }  
        
                            else if (selectedElement.nodeName == "attribute" || selectedElement.nodeName == "WL:ATTRIBUTE") {  
        
                                if (selectedElement.attributes["attributeValue"] != undefined)  
        
                                    span.innerHTML = "Actual Attribute: " + selectedElement.attributes["attributeValue"].value;  
        
                                element.appendChild(span);  
        
                            }  
        
                            else if (selectedElement.nodeName == "comment" || selectedElement.nodeName == "WL:COMMENT") {  
        
                                if (selectedElement.attributes["commentValue"] != undefined)  
        
                                    span.innerHTML = "Comments Made: " + selectedElement.attributes["commentValue"].value;  
        
                                element.appendChild(span);  
        
                            }  
        
                            //                      span.innerHTML = "</table>";  
        
                            //                      element.appendChild(span);  
        
                            //                      element.innerHTML = "<table border='1' cellspacing='1' cellpadding='0' width='100%' style='font-family:arial; font-size:8pt'><tr bgcolor='silver'><td width='100'>Attribute</td><td>Value</td></tr>            <tr>        <td valign='top'>Comment</td><td>Here are some comments made by John Doe abougt the guy who you see in the photos</td></tr></table>";  
        
                            element.style.border = "1px solid gray";  
        
                            element.style.marginTop = "3px";  
        
                        }  
        
                    };  
        
                    MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);  
        
                        </script> 
        
                </form> 
        
            </body> 
        
            </html>

answered on 10 Mar 2010, 04:35 PM

Hi Michael,

To fix the problem you should set the custom module height in the initialize function:

MyModule.prototype = {

initialize: function() {

this._editorPathArray = [];

MyModule.callBaseMethod(this, 'initialize');

var selfPointer = this;

this.get_editor().add_selectionChange(function() { selfPointer.showDetail(); });

var element = this.get_element();

element.style.height = "100px";

},

Since this will display the empty container of the module on page load, you can hide and show the module using the Modules Manager split button.

Sincerely,
Rumen
the Telerik team