External css for the editor works in all browsers except firefox

[Kalyani]

I am trying to use an external css to design my editor.  In my cs I use this code to inject the css - 

 private void Page_PreRender(object sender, EventArgs e)
 {
  foreach (RadEditor editor in Utility.FindControlsRecursiveByType<RadEditor>(Page))
   editor.CssFiles.Add("~/CSS/HelpEditor.css");
 }

My editor code is this - 
 <tlrk:RadEditor ID="D0_RadArticle" runat ="server" Width="650px" ToolsFile="~/XML/Editor/HelpEditor.xml"
    StripAbsoluteImagesPaths="true">
   <ImageManager ViewPaths="~/Images" />           
  </tlrk:RadEditor>

This works perfectly in IE browsers ( I tested IE7 and up) and in chrome too.  I cannot see the css in firefox alone.  My version is 21.0.

I have also attached screen shot to show how it looks in Firefox and chrome.  Can you please tell me what I might be missing.

Thanks,
Kalyani

[Ianko]

Hello Kalyani,

I tried to reproduce the problem with the addition of external CSS files to the RadEditor under Firefox, but to no avail. I am attaching to this message a sample project and some screenshots so you could compare them with your actual project and isolate any possible differences.

If possible send more detailed information about the problem you are experiencing and steps for reproducing it in the attached sample so that we can inspect the issue locally.

Regards,
Ianko
Telerik

[Kalyani]

Thank you so much for your reply.  I found out the issue but am not sure why I am facing it.  In my aspx file I have this javascript code.

function Dialog_OnOpen(dialogId)
 {
   if (dialogId == "<%=Dialog1.ClientID%>")
 {
    var editor = $find("<%=D0_RadArticle.ClientID%>");
    editor.onParentNodeChanged();
    $get("ctl00_Dialogs_Dialog1_C").style.overflow = "hidden";
  }
}

The issue is with editor.onParentNodeChanged();  Removing this line fixes the css issue (ie) the css starts working in firefox too?  Is there any way to fix this?  

Thank you
Kalyani

[Ianko]

Hello Kalyani,

I have tested the described scenario and I could confirm that this is an unexpected behavior and I am reporting this issue as a bug. 

While testing the scenario I found another solution for you that could be helpful.

<telerik:RadEditor id="RadEditor1" runat="server" OnClientLoad="invoke">
</telerik:RadEditor>
   <script>
       function invoke(sender, args) {
           if ($telerik.isFirefox) {
               setTimeout(function(){
                       sender.onParentNodeChanged()
                       }, 500);
           } else {
               sender.onParentNodeChanged();
           }
       }
   </script>

You could follow this code example. As it seems the CSS file can not be loaded when using Firefox agent. The example fix code checks the browser and if it is Firefox the onParentNodeChanged method is invoked after 500ms delay. The delayed invoke is just for an example, you can set a different parameter, that you find comfortable.

Thank you for helping us to make RadControls better. For the bug report your Telerik points have been updated. You can follow the progress of this case here: FIX Calling onParentNodeChanged() under FireFox causes the ContentAreaCssFile to be lost.

Do not hesitate contacting us about further issues with our products.

Regards,
Ianko
Telerik