Disable Table Resizing in the Editor

Updated on Jun 24, 2026

Environment

Product

Editor for Blazor

Description

How can I disable table resizing in the Telerik UI for Blazor Editor?

Solution

Hide table resize handles, to prevent table resizing. The approach depends on the Editor edit mode:

• Div mode — use regular page CSS.
• Iframe mode — inject CSS into the iframe document with JavaScript.

Div mode

When the Editor EditMode is Div, the editable area is part of the current page document and inherits its CSS.

Hide table resize handles in the Telerik UI for Blazor Editor (Div mode)

@using Telerik.Blazor.Components.Editor

<TelerikEditor EditMode="@EditorEditMode.Div"
               @bind-Value="@EditorValue"
               Tools="@EditorToolSets.All">
</TelerikEditor>

<style>
    /* Hide column resizers */
    .k-editor .ProseMirror .column-resize-handle,
    /* Hide row resizers */
    .k-editor .ProseMirror .row-resize-handle,
    /* Hide table resizers */
    .k-editor .ProseMirror table ~ .k-editor-resize-handle {
        display: none !important;
    }
</style>

@code {
    private string EditorValue { get; set; } = @"
<table>
    <tbody>
        <tr><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr>
        <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td></tr>
        <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td></tr>
    </tbody>
</table>";
}

Iframe mode

When the Editor EditMode is Iframe (the default), the editable area is inside an <iframe> element that does not apply the CSS rules of the current page. You must inject the CSS into the iframe document using JavaScript.

Hide table resize handles in the Telerik UI for Blazor Editor (Iframe mode)

@inject IJSRuntime JS
@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@EditorToolSets.All">
</TelerikEditor>

@* suppress-error allows script tags inside Razor components as a workaround. *@
@* Move this script to an external JS file in production environment. *@
<script suppress-error="BL9992">
    function hideEditorTableResizeHandlesInIframe() {
        var iframe = document.querySelector(".k-editor iframe");
        if (!iframe) return;
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var style = doc.createElement("style");
        style.textContent = ".column-resize-handle, .row-resize-handle, table ~ .k-editor-resize-handle { display: none !important; }";
        doc.head.appendChild(style);
    }
</script>

@code {
    private string EditorValue { get; set; } = @"
<table>
    <tbody>
        <tr><td>R1C1</td><td>R1C2</td><td>R1C3</td></tr>
        <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td></tr>
        <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td></tr>
    </tbody>
</table>";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("hideEditorTableResizeHandlesInIframe");
        }
    }
}

See Also

• Editor Edit Modes
• Editor Built-in Tools