[Solved] Error applying style css class

[Paul]

Hi

I have a RadEditor implemented within a dynamic data website.  On my development server everything works fine.  However once I move the application to the shared hosting environment on Go Daddy a strange error happens.

I highlight a word to apply a different style to the word, example a medium title, but it actually makes the word go away.  Displaying the html shows the original line fragment.

<div><span class="content">The situation is very grim in Kisumu. People are missing,

 This is the result after highlighting the word situation and clicking medium titles from the style drop down.

<div><span class="content">The <span class="mediumTitles" style="font-family: azby; ;"></span>is very grim in Kisumu. People are missing

Doing the same thing from my development server works correctly and the html shows the following.

<div><span class="content">The <span class="mediumTitles">situation</span> is very grim in Kisumu. People are missing

If I save the data from the development server and then look at the data from the host environment the Design and Preview both look correct.

Thanks for your help.

Paul

[Rumen]

Hi Paul,

I am not aware of this problem and unfortunately I was unable to reproduce it. I saw however that you are not using neither the latest Q1 SP2 2009 version nor the Q2 2009 beta build. Could you please test them and see whether the problem exists in these version?

Another reason for the problem could be some configuration setting of the Go Daddy server that is different from your local development server.

If you still experience this problem, please open a support ticket and send a sample working project along with steps on how to reproduce the problem. This will help us to debug the error and provide a solution.

All the best,
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.

[Bulent Can]

I've had the same problem using Chrome.  It's fine in IE.

Here, "azby" is the keyword I suppose;

"font-family: azby;"

Where does this come from?

Regards,

Bulent

[Lini]

Hi Bulent,

The empty font tag comes from our editor implementation - it is used to mark the content which will get the new css class. Older versions of the editor had a problem with the Chrome browser, similar to what you described, but it has been fixed and the current version should be OK. Can you please test the behavior on our online demos and list the steps to reproduce the problem, so we can investigate further? I used http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx to test with Chrome and apply CSS class worked as expected.

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Bulent Can]

Hi Lini,

I could not reproduce the problem in your editor demo found at:

http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx

I suspect two things:

• Either my RadEditor version is different than yours 
• Or my specific configuration of the RadEditor is causing this (see below) 

This is what I have in my environment:

• .NET Framework Ver 2.0
• RadControls_for_ASP.NET_AJAX_2009_1_402_dev
• Chrome for testing

I configure the RadEditor in codebehind as follows:

Public Sub PrepareEditors(ByVal oEditor)

        oEditor = CType(oEditor, RadEditor)

        oEditor.EnsureToolsFileLoaded()

        RemoveButton("Print", oEditor)

        RemoveButton("FlashManager", oEditor)

        RemoveButton("MediaManager", oEditor)

        RemoveButton("TemplateManager", oEditor)

        RemoveButton("FormatCodeBlock", oEditor)

        RemoveButton("AbsolutePosition", oEditor)

        RemoveButton("ApplyClass", oEditor)

        RemoveButton("InsertFormElement", oEditor)

        RemoveButton("InsertSnippet", oEditor)

        RemoveButton("ImageMapDialog", oEditor)

        RemoveButton("InsertCustomLink", oEditor)

        RemoveButton("FormatBlock", oEditor)

        RemoveButton("DocumentManager", oEditor)

        RemoveButton("XhtmlValidator", oEditor)

        RemoveButton("ImageManager", oEditor)

        RemoveButton("Zoom", oEditor)

        RemoveButton("ModuleManager", oEditor)

        RemoveButton("ToggleScreenMode", oEditor)

        RemoveButton("ABOUTDIALOG", oEditor)

        oEditor.NewLineBr = True

        For Each itm As Telerik.Web.UI.EditorParagraph In oEditor.Paragraphs

            oEditor.Paragraphs.Remove(itm)

        Next

        oEditor.Paragraphs.Add("Normal", "<BODY style='margin:5px;font-family:Arial;font-size:12px'>")

        oEditor.Paragraphs.Add("Heading 1", "<h1 style='margin:5px;font-family:Arial;font-size:25pt;color:black'>")

        oEditor.Paragraphs.Add("Heading 2", "<h2 style='margin:5px;font-family:Arial;font-size:20pt;color:black'>")

        oEditor.Paragraphs.Add("Heading 3", "<h3 style='margin:5px;font-family:Arial;font-size:15pt;color:black'>")

        oEditor.Paragraphs.Add("Heading 4", "<h4 style='margin:5px;font-family:Arial;font-size:10pt;color:black'>")

        oEditor.Paragraphs.Add("Paragraph", "<P  style='margin:5px;font-family:Arial;font-size:9pt;color:black'>")

        oEditor.Paragraphs.Add("Hyperlink", "<A style='margin:5px;font-family:Arial;font-size:9pt'>")

        oEditor.ImageManager.EnableImageEditor = False

    End Sub

    Public Sub RemoveButton(ByVal name As String, ByVal oEditor As RadEditor)

        For Each group As Telerik.Web.UI.EditorToolGroup In oEditor.Tools

            Dim tool As Telerik.Web.UI.EditorTool = group.FindTool(name)

            If Not tool Is Nothing Then

                group.Tools.Remove(tool)

            End If

        Next

    End Sub

********************

I run the page with this configuration.   Then type one word (any word will do, e.g hello) in the editor.  Highlight that word and change the font size to 16px (any size will do).   The text disappears.  Go into HTML view and this is what you see:

<span style="font-family: azby; font-size: 16px; ;"></span>

Regards,

Bulent

[Lini]

Hello Bulent,

Try upgrading to the Q2 2009 version of the RadControls (2009.2.826 is the current build on our site). I checked the release notes for Q2 and noticed a few fixes for Safari/Chrome (both are Webkit browsers) that relate to changing font name and size or applying CSS.

I did not see any problems with the code you sent, except that you might use

        oEditor.Paragraphs.Clear()

instead of

        For Each itm As Telerik.Web.UI.EditorParagraph In oEditor.Paragraphs

            oEditor.Paragraphs.Remove(itm)

        Next

to clear the paragraphs collection before you add your own values.

Regards,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Bulent Can]

Thank you Lini. 

I'll upgrade at the first opportunity.

Kind regards,

Bulent