RadEditor content iframe size small

13 posts, 0 answers
  1. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 22 Jun 2015 Link to this post

    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!

  2. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 22 Jun 2015 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 22 Jun 2015 Link to this post

    Same problem occurs whether ContentAreaMode is iframe or div, although the latter replicates page content better.
  5. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 22 Jun 2015 in reply to Graham Link to this post

    And this is all in an UpdatePanel.
  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 24 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Eric M
    Eric M avatar
    4 posts
    Member since:
    Jan 2015

    Posted 09 Jan in reply to Marin Bratanov Link to this post

    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;
    }

  8. Eric M
    Eric M avatar
    4 posts
    Member since:
    Jan 2015

    Posted 09 Jan in reply to Eric M Link to this post

    I should note that I'm not pasting, simply setting the content of the editor in a postback.
  9. Eric M
    Eric M avatar
    4 posts
    Member since:
    Jan 2015

    Posted 09 Jan in reply to Eric M Link to this post

    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("");

  10. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 09 Jan in reply to Eric M Link to this post

    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.

  11. Eric M
    Eric M avatar
    4 posts
    Member since:
    Jan 2015

    Posted 09 Jan in reply to Graham Link to this post

    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.

  12. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 11 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 11 Jan in reply to Marin Bratanov Link to this post

    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 ?

  14. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 11 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017