Broken Tools in Inline Mode at 100% Width

2 posts, 1 answers
  1. Ken Cox
    Ken Cox avatar
    100 posts
    Member since:
    Oct 2002

    Posted 17 Nov 2014 Link to this post

    Can anyone reproduce this? The editing tools are all out of whack when I set inline mode and make the width 100%. I'm using it inside a Layout

        <telerik:LayoutRow>
                    <Columns>
                        <telerik:LayoutColumn Span="12" SpanXs="12" SpanSm="12">
                            <div style="background-color: #EEEEEE; margin-top: 10px;">
       <telerik:RadEditor ID="RadEditor1"  runat="server" EditType="Inline" Width="100%" Enabled="True">
        <Content>
            <div>
                <h2 class="titleText">RadEditor for ASP.NET AJAX</h2>
                <p style="text-align: justify;">
                    <span style="color: #4f6128; font-size: 19px;"><strong>RadEditor</strong></span><span style="color: #4f6128;">
                    </span>is not simply an HTML
                    <a href="#HTMLDescription">
                        <sup>1</sup>
                    </a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in
                    <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>.
                </p>
            </div>
        </Content>
    </telerik:RadEditor>
                            </div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 18 Nov 2014 Link to this post

    Hello Ken,

    Indeed, when the editor's size is set in percent, the toolbar does not have a proper size and I am logging this for fixing. I have also updated your Telerik points for your report.

    In the meantime, I can suggest two possible workarounds:

    • simply set the ToolsWidth property of the editor to the desired dimensions:
      <telerik:RadEditor ID="RadEditor1" runat="server" Width="100%" EditType="Inline"  ToolsWidth="400px"></telerik:RadEditor>
    • Add the following JavaScript that will calculate the current editor dimensions when the toolbar shows up:
      function OnClientLoad(sender, args) {
          var toolPopup = sender.get_toolAdapter().get_window();
          toolPopup.__editor = sender;
          toolPopup.add_show(resizeToolWindow);
      }
       
      function resizeToolWindow(sender, args) {
          if (sender.__editor) {
              var editorDims = $telerik.getBounds(sender.__editor.get_element());
              sender.set_width(editorDims.width);
              var currDims = sender.getWindowBounds();
              sender.moveTo(editorDims.x, editorDims.y - currDims.height - 10);
          }
      }
      <telerik:RadEditor ID="RadEditor1" runat="server" Width="100%" EditType="Inline" OnClientLoad="OnClientLoad"></telerik:RadEditor>

    You can track this matter's progress here: http://feedback.telerik.com/Project/108/Feedback/Details/143867-insufficient-toolbar-width-when-edittype-inline-and-editor-width-is-set-in-percen.  I would also encourage you to leave your comment on the desired behavior as well.

    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top