Issue with RadEditor ContentAreaCssFile

9 posts, 0 answers
  1. Brandon Worrell
    Brandon Worrell avatar
    9 posts
    Member since:
    Dec 2007

    Posted 14 Jan 2010 Link to this post

    We are trying to specify a custom css file for the content area of the RadEditor by setting the radEditor.ContentAreaCssFile property.

     

    This causes it to load the appropriate css file into the editor as expected.

     

    However, it also loads the css files from the parent pages and it loads them after the ContentAreaCssFile stylesheet file, which means that the ContentAreaCssFile's styles get overridden by the parent page's styles.

     

    The resulting Head area looks like this:

     

    <head>

     

    <link href="/common/css/editor.css" rel="stylesheet" />                     <------------------- ContentAreaCssFile

    <link href="/admin/common/css/admin.css" rel="stylesheet" />                <------------------- stylesheet from parent page

    <link href="/admin/common/css/contentmanagement.css" rel="stylesheet" />    <------------------- stylesheet from parent page

     

    </head>

     

    According to the documentation for the RadEditor found here:

     

    http://www.telerik.com/help/aspnet-ajax/editor-content-area-appearance-problems.html

     

    ... we should be able to fix this by setting the CssFiles property to load only the stylesheets we want.

     

    However, the editor appears to be ignoring this setting. We've tried setting it in markup and programmatically. Neither worked. It still loads the stylesheets for the parent pages.

     

    We're using version 2009.2.701.20 of the Telerik.Web.UI.dll

  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 18 Jan 2010 Link to this post

    Hi Brandon,

    You can fix the problem only by setting the ContentAreaCssFile property. You should open the /common/css/editor.css file and set the !important rule after each css property value, e.g.

    body 
    {
       font-family: Verdana !important;
       font-size: 18px !important;
       color: #99ff99 !important;
       background-color: #333333 !important;
       text-align: left !important;
       word-wrap: break-word !important;
    }

    You can see the following live example for more information: Customize Content Area.

    If you experience any problems, open a support ticket and send a sample working project that demonstrates them. I will examine it and provide a solution.


    All the best,
    Rumen
    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.
  3. Brandon Worrell
    Brandon Worrell avatar
    9 posts
    Member since:
    Dec 2007

    Posted 18 Jan 2010 Link to this post

    We’ve already used the method of setting !important on the styles, but for various reasons that approach will not work for us.

     

    Please read our original post carefully.

     

    We are already setting the ContentAreaCssFile property and we have tried setting the CssFiles property, but setting that property is not affecting the loading of css from the parent pages, despite the fact that Telerik documentation says it should. (The link to the documentation where it says this was provided in our original forum post)

     

    Are you basically saying that the functionality described in the Telerik documentation doesn’t really exist? Is the documentation wrong?

  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 19 Jan 2010 Link to this post

    Hi Brandon Worrell,

    The solution in the documentation works fine and you can experience this problem only if you set the CssFiles property in the codebehind and after that override it by setting the ToolsFile property. Is this your scenario?

    I asked you to open a support ticket and send us a sample working project that demonstrates the problem and your scenario. I will examine it, reproduce the problem and provide a solution.

    Best regards,
    Rumen
    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.
  5. Brandon Worrell
    Brandon Worrell avatar
    9 posts
    Member since:
    Dec 2007

    Posted 04 Feb 2010 Link to this post

    That was the issue. Setting the ToolsFile property after the CssFiles property. I would recommend noting that in the documentation. It will hopefully save someone some time down the road.
  6. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 05 Feb 2010 Link to this post

    Hi Brandon,

    This information was added to the documentation, but it should be uploaded to the public site. One this is done your fellow developers will be able to read it and hopefully avoid this problem.

    Have a nice weekend!
    Rumen
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  7. Di
    Di avatar
    4 posts
    Member since:
    Nov 2011

    Posted 25 Jan 2012 Link to this post

    I have huge css file for admin panel and its ruin my content area. I dont want inherit all that lines and fix by temporary solution and extra work.. its jut not right way to solve this problem. please help about that issue.
  8. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 25 Jan 2012 Link to this post

    Hello Sener,

    Try the solution provided in the following help article: Content Area Appearance Problems.


    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Di
    Di avatar
    4 posts
    Member since:
    Nov 2011

    Posted 25 Jan 2012 Link to this post

    ok thank you. I did it from code behind dynamicly.

     

     

    RadContentEditor.CssFiles.Clear();
    EditorCssFile ecfTypo = new EditorCssFile("~/App_Themes/" + ConfigurationManager.AppSettings["Default_Theme"].ToString() + "/typography.css");
    RadContentEditor.CssFiles.Add(ecfTypo);

     

     

     

     

     

     

Back to Top