RadEditor content iframe size small

[Graham]

Hi,

I am having major problems with the RadEditor control.
What makes this particularly troublesome is that it works in IE11
but not Chrome.

I have a RadEditor which is embedded within an asp:ListView control (see below) whic in turn, is embedded into ans ascx user control.


The general idea is that the code behind hides and shows different controls in the ListView rows according to the configuration of a property panel.

When the user makes a selection on the page, the user control is made visible and the asp:ListView below is updated with a new DataBind().

<asp:ListView ID="lveProperties" runat="server"
OnItemDataBound="lveProperties_ItemDataBound">


        <ItemTemplate>





            <asp:Panel ID="pnlProperty" runat="server">


                <div class="row">


                    <asp:Literal ID="litBannerSpacer1"
runat="server" Text="<br />"
Visible="false"></asp:Literal>


                    <div class="<%=col1Width%>
coursenames">


                        <asp:Label ID="lblPropertyName"
runat="server"></asp:Label>


                    </div>


                    <div class="<%=col2Width%>
coursenames">


                        <asp:CheckBox ID="chkCheck"
runat="server" Visible="False"></asp:CheckBox>


                        <telerik:RadTextBox ID="txtText"
runat="server" Visible="false"></telerik:RadTextBox>


                        <telerik:RadNumericTextBox ID="txtNumber"
runat="server" Type="Number"
Visible="false"></telerik:RadNumericTextBox>


                        <telerik:RadComboBox ID="ddlList"
runat="server" Visible="false"
MaxHeight="200"></telerik:RadComboBox>


                        <telerik:RadDatePicker ID="dpDate"
runat="server" Visible="false"
MinDate="1900/01/01"></telerik:RadDatePicker>


                        <telerik:RadEditor ID="txtNText"
runat="server" Visible="false" EditModes="Design,Html"
NewLineMode="Br">


                            <CssFiles>


                                <telerik:EditorCssFile
Value="/Styles/RadEditorContentAreaStyles.css" />


                            </CssFiles>


                            <Languages>


                                <telerik:SpellCheckerLanguage
Code="en-US" Title="English (US)" />


                                <telerik:SpellCheckerLanguage
Code="fr-FR" Title="French" />


                                <telerik:SpellCheckerLanguage
Code="de-DE" Title="German" />


                            </Languages>


                            <Tools>


                                <telerik:EditorToolGroup>


                                    <telerik:EditorTool
Name="Cut" />


                                    <telerik:EditorTool
Name="Copy" ShortCut="CTRL+C" />


                                    <telerik:EditorTool
Name="Paste" ShortCut="CTRL+V" />


                                    <telerik:EditorSeparator
Visible="true" />


                                    <telerik:EditorTool
Name="Undo" />


                                    <telerik:EditorTool
Name="Redo" />


                                </telerik:EditorToolGroup>


                                <telerik:EditorToolGroup>


                                    <telerik:EditorTool
Name="Bold" />


                                    <telerik:EditorTool
Name="Underline" />


                                    <telerik:EditorTool
Name="Italic" />


                                    <telerik:EditorTool
Name="StrikeThrough" />


                                    <telerik:EditorSeparator
Visible="true" />


                                    <telerik:EditorTool
Name="JustifyLeft" />


                                    <telerik:EditorTool
Name="JustifyCenter" />


                                    <telerik:EditorTool
Name="JustifyRight" />


                                    <telerik:EditorSeparator
Visible="true" />


                                    <telerik:EditorTool
Name="InsertOrderedList" />


                                    <telerik:EditorTool
Name="InsertUnorderedList" />


                                    <telerik:EditorSeparator
Visible="true" />


                                    <telerik:EditorTool
Name="Indent" />


                                    <telerik:EditorTool
Name="Outdent" />


                                </telerik:EditorToolGroup>


                                <telerik:EditorToolGroup>


                                    <telerik:EditorTool
Name="ForeColor" />


                                    <telerik:EditorTool
Name="BackColor" />


                                    <telerik:EditorTool
Name="InsertTable" />


                                </telerik:EditorToolGroup>


                                <telerik:EditorToolGroup>


                                    <telerik:EditorTool
Name="FontName" />


                                    <telerik:EditorTool
Name="RealFontSize" />


                                </telerik:EditorToolGroup>


                                <telerik:EditorToolGroup>


                                    <telerik:EditorTool
Name="AjaxSpellCheck" />


                                </telerik:EditorToolGroup>


                            </Tools>


                        </telerik:RadEditor>


                    </div>


                    <asp:Literal ID="litBannerSpacer2"
runat="server" Text="<br /><br />"
Visible="false"></asp:Literal>


                </div>


            </asp:Panel>





Part of this process sets the RadEditor properties:





                        txtNText.Visible = true;


                        txtNText.Width =
Unit.Parse(property.ControlWidth);        // eg "100%"


                        txtNText.Height =
Unit.Parse(property.ControlHeight);      // eg "300"


                        txtNText.MaxTextLength = property.MaxLength;


                        currentValue = GetZoneProperty(0,
languageId, property.PropertyName);


                        if (currentValue == "") currentValue =
defaultValue;


                        txtNText.Content = currentValue;


                        txtNText.Enabled = enabled;





                        // Spell checking


                        txtNText.SpellCheckSettings.AllowAddCustom =
true;



txtNText.SpellCheckSettings.SpellCheckProvider =
SpellCheckProvider.PhoneticProvider;





In IE11, when the RadEditor appears with text populated, it is
correct, however in Chrome, is appears with a single line (see image
attachment).





While debugging the DOM in both IE11 and Chrome, I note that the
iframe is only a few pixels high. IE11 seems to ignore this whereas
Chrome doesn't. I tried various ways, including all of those on the
Telerik forums to 'get' the iframe and set its height, but for some
reason, none of them worked. The Chrome DOM showed this:





<td
id="ctl00_ContentPlaceHolder_ctlZonePropertyPanel_lveProperties_ctrl1_txtNTextCenter"
class="reContentCell" style="height:100%;">


    <label
for="ctl00_ContentPlaceHolder_ctlZonePropertyPanel_lveProperties_ctrl1_txtNTextContentHiddenTextarea"
style="display:none;">RadEditor hidden textarea</label>


    <textarea
id="ctl00_ContentPlaceHolder_ctlZonePropertyPanel_lveProperties_ctrl1_txtNTextContentHiddenTextarea"
name="ctl00$ContentPlaceHolder$ctlZonePropertyPanel$lveProperties$ctrl1$txtNText"
rows="4" cols="20" style="display:none;">%3cp
style%3d%22text-align%3a center%3b%22%3e%3cspan style%3d%22color%3a
%23002060%3b font-size%3a 18px%3b%22%3eWelcome to the Bushfire
Safety Package


%3c/span%3e%3c/p%3e


%3cp%3e


%3cspan style%3d%22color%3a %23002060%3b%22%3eLorem ipsum
dolor.....</textarea>


    <iframe frameborder="0"
src="javascript:'<html></html>';"
id="ctl00_ContentPlaceHolder_ctlZonePropertyPanel_lveProperties_ctrl1_txtNText_contentIframe"
title="Rich text editor with ID
ctl00_ContentPlaceHolder_ctlZonePropertyPanel_lveProperties_ctrl1_txtNText"
style="width: 100%; height: 35px; margin: 0px; padding:
0px;">Your browser does not support inline frames or is currently
configured not to display inline frames.</iframe>


</td>





My RadEditor control is called txtNText so quite how the name has been changed to ...textNTextCenter I don't know.

Even using document.getElementById on ''ctl00_ContentPlaceHolder_ctlZonePropertyPanel_lveProperties_ctrl1_txtNText_contentIframe"
did not find the iframe - how can this be ? All the sample solutions eg:

var editorIframe = $get(editorClientID).getElementsByTagName('iframe')[0];
editorIframe.style.height = '100%';

$('#' + editorClientID).setSize('100%','300px');

Failed to find the iframe.

How can I fix this please ?

Better still, can we have a JavaScript API added to the RadEditor which can be called which just 'works' and fixes this ?

Thankyou

 

PS: Why does pasting into this editor cut all my lines in half and why does it insert a blank line between every line ? This is a nuisance!

[Graham]

Just a follow up: I have found that when the RadEditor appears with only one line of text per the image attached in my first post, if I press 'HTML' and then 'Design' the RadEditor appears correctly.

[Graham]

Same problem occurs whether ContentAreaMode is iframe or div, although the latter replicates page content better.

[Graham]

And this is all in an UpdatePanel.

[Marin Bratanov]

Hi Graham,

This situation seems quite strange. What I can suggest is:

1. ensure you are using the latest version of the controls (Q2 2015 just went out)
2. try the Lightweight RenderMode
3. try setting the EnableAjaxSkinRendering property of the editor to true if it is shown during an AJAX request
4. try calling its repaint() method when the page load. Here is a basic example that will repaint all editors in a certain element (replace it with your listview):
   

   function repaintEditors() {
       var parentElem = $telerik.$("#lveProperties"); //you may want to consider the ends-with selector
       $telerik.$(".RadEditor", parentElem).each(function (index, elem) {
           if (elem && elem.control && elem.control.repaint) {
               elem.control.repaint();
           }
       });
       Sys.Application.remove_load(repaintEditors);//you may need to remove this line, depending on how/when you (want to) call this function
   }
   Sys.Application.add_load(repaintEditors);

   You could call that from the server, let's assume a button click is the postback event that shows editors (rebinds listview):
   

   protected void Button1_Click(object sender, EventArgs e)
   {
       ScriptManager.RegisterStartupScript(Page, Page.GetType(), "someKey", "Sys.Application.add_load(repaintEditors);", true);
   }

   and you would, most likely, not need the Sys.Application.add_load() call, in the script itself.
   
   

If this does not help you resolve the situation, I would advise on opening a support ticket and sending us a small sample we can debug, so we can offer a more concrete answer. 

On pasting - the editor works with the content provided by the browser when pasting (http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/pasting-content/overview) and, especially if the source is MS Word, blank lines are often to be expected because it is extremely common to have two paragraph symbols after each paragraph that create visual space.

Regards,

Marin Bratanov
Telerik

[Eric M]

I have this exact same problem. Issue only in Chrome, when the control becomes visible in a list/updatepanel/etc. The scrollbar looks exactly like your image. Clicking the 'preview' or 'html' tabs fixes the issue exactly the same as you, so I tried to programmatically click it after the control becomes visible with jQuery, but that didn't work. I also tried the following styles which fix the problem, until you click the 'html' tab. When you click the 'html' tab, text gets broken bad. I'm trying to see if the recommendations posted here will work. So far they dont.

.reContentCell iframe {
    height: 100% !important;
}

.RadEditor {
    height: 100% !important;
}

[Eric M]

I should note that I'm not pasting, simply setting the content of the editor in a postback.

[Eric M]

Here's how I fixed it. It's kinda a hack, but it works in Chrome and IE. This applies to Telerik.Web.UI Version=2015.3.930.45

 

Inside:

function OnClientLoad(editor, args) {}

 

I do this:

        $("IFrame").height("100%");
        $(".RadEditor").height("");

[Graham]

Thanks Eric, much appreciated.

Would you be able to show your solution in context please as I am not sure how to hook the OnClientLoad into my page ?

I have come to the conclusion that this is an issue related to RadEditor being contained within a Panel or control which is being programmatically hidden and shown. On pages where I simply show the control and do not hide/show it, it works fine.

[Eric M]

Agree 100% is likely an issue with programmatically hide/show in a nested control as that's what I'm doing.

 

Here's my setup, in a panel or list control I have this:

 

                        <telerik:RadEditor ID="HTMLEditor" runat="server"
                     
                     ResolvedRenderMode="Classic"  
                    OnClientLoad="OnClientLoad" Width="100%">

      <Tools>
                        <telerik:EditorToolGroup Tag="MainToolbar">
                            <telerik:EditorTool Name="FindAndReplace" RenderMode="Classic" />
                            <telerik:EditorSeparator RenderMode="Classic" />
                            <telerik:EditorSplitButton Name="Undo" RenderMode="Classic">
                            </telerik:EditorSplitButton>
                            <telerik:EditorSplitButton Name="Redo" RenderMode="Classic">
                            </telerik:EditorSplitButton>
                            <telerik:EditorSeparator RenderMode="Classic" />
                            <telerik:EditorTool Name="Cut" RenderMode="Classic" />
                            <telerik:EditorTool Name="Copy" RenderMode="Classic" />
                            <telerik:EditorTool Name="Paste" RenderMode="Classic" ShortCut="CTRL+V / CMD+V" />
                        </telerik:EditorToolGroup>
                        <telerik:EditorToolGroup Tag="Formatting">
                            <telerik:EditorTool Name="Bold" RenderMode="Classic" />
                            <telerik:EditorTool Name="Italic" RenderMode="Classic" />
                            <telerik:EditorTool Name="Underline" RenderMode="Classic" />
                            <telerik:EditorSeparator RenderMode="Classic" />
                            <telerik:EditorSplitButton Name="ForeColor" RenderMode="Classic">
                            </telerik:EditorSplitButton>
                            <telerik:EditorSplitButton Name="BackColor" RenderMode="Classic">
                            </telerik:EditorSplitButton>
                            <telerik:EditorSeparator RenderMode="Classic" />
                            <telerik:EditorDropDown Name="FontName" RenderMode="Classic">
                            </telerik:EditorDropDown>
                            <telerik:EditorDropDown Name="RealFontSize" RenderMode="Classic">
                            </telerik:EditorDropDown>
                        </telerik:EditorToolGroup>
                    </Tools>
                     
                     </telerik:RadEditor>

 

 Now, in the aspx page I have a javascript block with this function:

 

function OnClientLoad(editor, args) {

        $(".reContentCell > iframe").height("100%");
        $(".RadEditor").height("");

}

 I tweaked the selector slightly since my post yesterday. Remember you need jQuery to get the implementation of OnClientLoad() to work. If this doesnt solve your issue, let me know.

[Marin Bratanov]

Hi guys,

I would also suggest you review this article on showing the editor: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/troubleshooting/appearance-issues-with-initially-hidden-editor. It explains similar issues and when to call the repaint() method of the control.

@Eric—I would advise you remove the ResolvedRenderMode setting, you should use only the RenderMode property.

Regards,

Marin Bratanov
Telerik

[Graham]

Marin,

Thanks for your reply.

I have already been round in circles with Telerik support and this control on several occasions, including the pages you list above. I have wasted far too much time trying to work around this BUG.

I am using the RadEditor in a ListView which in turn, is embedded in an ascx control - it's actually a property panel. Therefore, there can be multiple RadEditors.

The control is embedded within a div (a tab control implemented via li and a href) which is hidden and shown. There are actually more than one div (tab) and therefore, more than one user control. As you can see, faffing around with JavaScript won't cut it because I have several RadEditors and I don't necessarily know how many or what their Ids are.

I seriously suggest that sizing the RadEditor using JavaScript is the WRONG solution and it must be changed.

I should be able to place the control on a form and it should just WORK. I should not have to FAF around trying to work around what is a BUG.

Please advise when Telerik are going to implement this control properly to use an alternative to JavaScript such as css.

The fact that sizing is implemented with JavaScript is a BAD design in this instance because the BUG is simply designed in from the start.

Would Telerik please FIX this BUG ?

[Marin Bratanov]

Hello Graham,

It would be great if all sizing could be done with CSS alone, but this is not always the case. RadEditor is far too complex and there are too many possible scenarios that it should cover for that (e.g., visible or hidden elements, various toolbar positions, modules, etc.). Here is a prime example—the toolbar is essentially a list of buttons. Before the browser renders this list, it is not known how tall the toolbar should be, because the toolset is arbitrary and it may or may not fit into a single row (or two, or three).

That being said, I suggest you try the Lightweight Render Mode: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/mobile-support/render-modes. It uses as little JS and as much CSS as possible, which should help.

As for calling repaint() for an arbitrary number of RadEditors—here is an example:

$telerik.$("#wrapper").show();
$telerik.$(".RadEditor", $telerik.$("#wrapper")).each(function(index, elem) {
    if (elem && elem.control && elem.control.repaint) {
        alert();
        elem.control.repaint();
    }
});

which will repaint all RadEditor controls inside the element with id "wrapper". You can tweak the jQuery selector to fit your needs (e.g., use an appropriate parent, or take the parent as an argument, or just repaint all editors on the page if they are visible—see the example below)

$telerik.$("#wrapper").show();
$telerik.$(".RadEditor").each(function(index, elem) {
    if (elem && elem.control && elem.control.repaint) {
        if (elem.control.isVisible && elem.control.isVisible()) {
            elem.control.repaint();
        }
    }
});

which can, of course, be refactored even further.

Regards,

Marin Bratanov
Telerik