Broken Tools in Inline Mode at 100% Width

[kencox]

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>

[Marin Bratanov]

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