This is a migrated thread and some comments may be shown as answers.
Broken Tools in Inline Mode at 100% Width
1 Answer 9 Views
This is a migrated thread and some comments may be shown as answers.
kencox
Top achievements
Rank 1
kencox asked on 17 Nov 2014, 07:14 PM
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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 18 Nov 2014, 02:46 PM

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.

 
Asked by
kencox
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or