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

[Solved] Issue with Client Side styling of elements within RadEditor

3 Answers 136 Views

Editor

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

virt asked on 21 Aug 2009, 03:38 PM

Hello,

I'm trying to dynamically change the style (hide/show) of the elements within RadEditor content area. For some reason it doesn't work in IE7 (works fine in FF). Can you please take a look and let me know what I need to change to make it work? I placed similar controls outside of content area of RadEditor and they seem to work fine (3 and 4 checkboxes).

Below is sample page.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Presentation._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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> 
        
                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                <script> 
        
                    var prod = "p1"; 
        
                    function toggle(field, checkbox) { 
        
                        var editor = $find("<%= RadEditor1.ClientID%>"); 
        
                        var fieldContainer = editor.get_document().getElementById(prod + field); 
        
                        fieldContainer.style.display = checkbox.checked ? '' : 'none'; 
        
                    } 
        
                    function toggleOut(field, checkbox) { 
        
                        var fieldContainer = document.getElementById(prod + field); 
        
                        fieldContainer.style.display = checkbox.checked ? '' : 'none'; 
        
                    } 
        
                </script> 
        
                </telerik:RadCodeBlock> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div id="Div1" style="overflow: hidden; width: 400px; height: 200px;"> 
        
                    <div id="p1color1" style="position: absolute; background-color: red; top: 158px; left: 9px;"><span class="label">Color: </span>Red</div> 
        
                    <div id="p1descr1" style="position: absolute; background-color: blue; top: 15px; left: 43px;"><span class="label">Description: </span>Straw Hat</div> 
        
                </div> 
        
                <div> 
        
                    <telerik:RadEditor ID="RadEditor1" runat="server"> 
        
                        <Content> 
        
                            <div id="product1" style="overflow: hidden; width: 400px; height: 200px;"> 
        
                                <div id="p1color" style="position: absolute; background-color: red; top: 158px; left: 9px;"><span class="label">Color: </span>Red</div> 
        
                                <div id="p1descr" style="position: absolute; background-color: blue; top: 15px; left: 43px;"><span class="label">Description: </span>Straw Hat</div> 
        
                            </div> 
        
                        </Content> 
        
                    </telerik:RadEditor> 
        
                </div> 
        
                <asp:Panel ID="Panel1" runat="server"> 
        
                    <asp:CheckBox ID="CheckBox1" Checked="true" runat="server" OnClick="toggle('color', this)" Text="Color" /><br /> 
        
                    <asp:CheckBox ID="CheckBox2" Checked="true" runat="server" OnClick="toggle('descr', this)" Text="Description" /><br /> 
        
                    <asp:CheckBox ID="CheckBox3" Checked="true" runat="server" OnClick="toggleOut('color1', this)" Text="Color" /><br /> 
        
                    <asp:CheckBox ID="CheckBox4" Checked="true" runat="server" OnClick="toggleOut('descr1', this)" Text="Description" /><br /> 
        
                </asp:Panel> 
        
                </form> 
        
            </body> 
        
            </html>

Thank you

3 Answers, 1 is accepted

answered on 26 Aug 2009, 12:06 PM

Hi Virt,

RadEditor uses the rich text editing engine of the browser in which it operates and the observed behavior is IE browser behavior. Due to this browser behavior it is not possible to hide HTML elements by setting style="display:none;" programmatically in editable IFRAME elements.

I experiment with different css properties and finally I found a solution for IE, e.g. to set width/height to 0px and overflow: hidden; :

    
            <%@ Page Language="C#" AutoEventWireup="true" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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 id="Head1" runat="server"> 
        
                <title></title> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                <script>  
        
                    var prod = "p1";  
        
                    function toggle(field, checkbox) {  
        
                        var editor = $find("<%= RadEditor1.ClientID%>");  
        
                        var fieldContainer = editor.get_document().getElementById(prod + field);  
        
                        fieldContainer.style.display = checkbox.checked ? '' : 'none';  
        
                        if ($telerik.isIE)   
        
                        { 
        
                            fieldContainer.style.width = checkbox.checked ? '' : '0px';  
        
                            fieldContainer.style.overflow = checkbox.checked ? '' : 'hidden';  
        
                        } 
        
                    }  
        
                    function toggleOut(field, checkbox) {  
        
                        var fieldContainer = document.getElementById(prod + field);  
        
                        fieldContainer.style.display = checkbox.checked ? '' : 'none';  
        
                    }  
        
                </script>  
        
                </telerik:RadCodeBlock>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager>  
        
                <div id="Div1" style="overflow: hidden; width: 400px; height: 200px;">  
        
                    <div id="p1color1" style="position: absolute; background-color: red; top: 158px; left: 9px;"><span class="label">Color: </span>Red</div>  
        
                    <div id="p1descr1" style="position: absolute; background-color: blue; top: 15px; left: 43px;"><span class="label">Description: </span>Straw Hat</div>  
        
                </div>  
        
                <div>  
        
                    <telerik:RadEditor ID="RadEditor1" runat="server">  
        
                        <Content>  
        
                            <div id="product1" style="overflow: hidden; width: 400px; height: 200px;">  
        
                                <div id="p1color" style="position: absolute; background-color: red; top: 158px; left: 9px;"><span class="label">Color: </span>Red</div>  
        
                                <div id="p1descr" style="position: absolute; background-color: blue; top: 15px; left: 43px;"><span class="label">Description: </span>Straw Hat</div>  
        
                            </div>  
        
                        </Content>  
        
                    </telerik:RadEditor>  
        
                </div>  
        
                <asp:Panel ID="Panel2" runat="server">  
        
                    <asp:CheckBox ID="CheckBox1" Checked="true" runat="server" OnClick="toggle('color', this)" Text="Color" /><br />  
        
                    <asp:CheckBox ID="CheckBox2" Checked="true" runat="server" OnClick="toggle('descr', this)" Text="Description" /><br />  
        
                    <asp:CheckBox ID="CheckBox3" Checked="true" runat="server" OnClick="toggleOut('color1', this)" Text="Color" /><br />  
        
                    <asp:CheckBox ID="CheckBox4" Checked="true" runat="server" OnClick="toggleOut('descr1', this)" Text="Description" /><br />  
        
                </asp:Panel>  
        
                </form> 
        
            </body> 
        
            </html>

I hope this helps.

Best regards,
Rumen
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.