This is a migrated thread and some comments may be shown as answers.

Broken Tools in Inline Mode at 100% Width

1 Answer 45 Views
This is a migrated thread and some comments may be shown as answers.
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: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">
            <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">
                </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="">SharePoint</a>.

1 Answer, 1 is accepted

Sort by
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;
    function resizeToolWindow(sender, args) {
        if (sender.__editor) {
            var editorDims = $telerik.getBounds(sender.__editor.get_element());
            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:  I would also encourage you to leave your comment on the desired behavior as well.


Marin Bratanov

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
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question