Rad Editor Sometimes Runs Off The Page

[Alex]

We have the RadEditor inside a RadGrid.  When the user adds a new record or edits one, the RadEditor applears to do the work.

Often, when someone firsts enters the site, goes to the page, and brings up the RadEditor, the RadEditor runs off the edge of the page expanding the RadGrid with it.  The text area of the RadEditor is only one line high.  See the attached picture (RadEditor_Error).

However, if the same person goes to another page, and comes back to the page, the RadEditor appears fine from then on.  See attached picture (RadEditor_Good).

We have size settings on the Rad_Editor but this keeps happening.

Could someone please help.

Thank you,

Alex

[Dobromir]

Hi Alex,

We are aware of this problem and already have it logged into our ToDo list. We will do out best to fix it for one of the upcoming releases. I will contact the developers of RadEditor to increase the priority of this item.

At present, I am unable to provide a suitable workaround on this problem.

Please excuse us for the inconvenience.

Regards,
Dobromir
the Telerik team

[Robert Field]

Hi,

We are experiencing this same problem still in the latest release Q3 2010. I was wondering if you are still tracking this as an open issue and if so when you plan to release a fix? or if there is already a fix that I can apply?

Thanks

[Rumen]

Hello Alex,

We are working on fixing this issue but unfortunately, I am unable to provide a firm estimate on when it will be available. The problem occurs if the RadEditor's toolbar calculates it size before the CSS resource files are loaded.

Could you please register the external RadEditor skins as it is shown in this KB article: Registering an external skin of RadEditor?

You can also take advantage of the recently introduced CDN support which will allow you to load the controls skins from the Telerik CDN. Telerik CDN is hosted on the Amazon CloudFront service.

You can find more information about our CDN support here and here.

By loading the external or CDN skins you will ensure that the editor will load its skin.


Another possible workaround is setting width:100% !important to the toolbar CSS selector, e.g.:

<style type="text/css">
    .reToolbar
    {
        width: 100%!important;
    }
</style>

If you have multiple instances of RadEditor on the page you can set CssClass to the editor in the RadGrid's editform to use it for cascading.


Kind regards,
Rumen
the Telerik team

[Robert Field]

Thank you Rumen,

I have followed your suggestions registering the skin externally, but this did not fix the problem, but the style override for the width of the reToolbar class has fixed the width issue. However we also have a height issue where under the same conditions the editors height is not resized/calculated properly to match the container and stretches beyond the bottom. Is there a similar style fix for this?

In our scenario the radeditor is made visible in an ajax request, I don't know if this may help identify the problem. I have attached a screenshot.

Thanks

[Rumen]

Hello Alex,

Can you please tell us whether you set the EnableEmbededSkins and EnableEmbeddedStylesheets properties to false when you tested with disabled embedded skins and enabled external ones?


Unfortunately, there is not a workaround for the side effect caused by the

<style type="text/css">
    .reToolbar
    {
        width: 100%!important;
    }
</style>

css style.


Best wishes,
Rumen
the Telerik team

[Jack]

Hi Guys,

Same happens for me - I've tried the solutions posted and the css below fixes the width issue but like Robert I still have a height prob.
Please see the images attached for IE, FF and Chrome

<style type="text/css">

    .reToolbar

    {

        width: 100%!important;  

    }

</style>

Is there a css fix like above for the height?

Cheers,
Jon

[Rumen]

Hi Jon,

The CSS hack is not recommended because there is not a solution for the side effect that it causes.

Please, try the solution provided in the following sticky note: Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent. It could be helpful.

Best regards,
Rumen
the Telerik team

[Jack]

Thank you Rumen,

I tried the radcodeblock in both the master page <Head> and on the page but got the error:-
'RadEditor' is a type and cannot be used as an expression

Please see the attached image.

I tried an external skin as outlined in this thread - it fixed the widths and heights but the toolbar icons don't show and I can't work out or get to work the fix for that as as outlined in this post

http://www.telerik.com/community/forums/aspnet-ajax/editor/images-not-displayed-in-firefox-ie7-when-using-external-skins.aspx

Cheers,
Jon 

[Dobromir]

Hi Jon,

The provided workaround is using WebResource handler to use the CSS files from the Telerik.Web.UI DLL. You can experience the reported error if your using VB. The code accessing the WebResource provided in the forum post mentioned by Rumen is C#.

Here is the VB version of this approach to manually register editor's CSS files:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <link href='<%= Page.ClientScript.GetWebResourceUrl(GetType(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'
        rel="stylesheet" type="text/css" />
    <link href='<%= Page.ClientScript.GetWebResourceUrl(GetType(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>'
        rel="stylesheet" type="text/css" />
    <link href='<%= Page.ClientScript.GetWebResourceUrl(GetType(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'
        rel="stylesheet" type="text/css" />
    <link href='<%= Page.ClientScript.GetWebResourceUrl(GetType(RadWindow), "Telerik.Web.UI.Skins.Default.Window.Default.css") %>'
        rel="stylesheet" type="text/css" />
</telerik:RadCodeBlock>

I hope this helps.

Kind regards,
Dobromir
the Telerik team

[Jack]

Hi Dobromir,

I should have spotted that but thanks - That's fixed everything up for me and all is good now!

Cheers,

Jon

[Robert Field]

Hi,

We have succesfully implemented this fix now, however we have run into a problem where although it resizes great on the ajax and everything looks fine. The dialogs are now messed up not rendering their styles. Help!

[Rumen]

Hello Robert,

The RadEditor's dialogs are based on RadWindow which loads its contents inside an IFRAME. This is another document which does not inherit the css stylesheet of the parent page where the editor resides. To load the needed css classes in the dialogs you should set the DialogsCssFile to point to external css file which contains the stylesheet of the controls contained in the dialogs.

You can find information about setting the DialogsCssFile property and the needed classes in the following article: Registering an external skin of RadEditor.

Kind regards,
Rumen
the Telerik team

[Chris]

Hi there,

I've just run into what appears to be the same issue using IE11 in IE9 mode and the Q2 2013 version of the Telerik controls.

Has any progress been made on this issue? Is there a viable workaround?

Many thanks,
Chris

[Ianko]

Hi Chris,

If the encountered problem is related to FileBrowser dialog and its stylization, please examine this troubleshooting article.

If this does not help with the encountered issue, please open a propert support ticket with more details about the scenario, configuration and the steps leading to the issue.

Regards,
Ianko
Telerik