New to Telerik UI for Blazor? Download free 30-day trial

Disable Label Wrapping in the Grid Popup Edit Form


Product Form for Blazor,
Grid for Blazor,
TreeList for Blazor


How to prevent text wrapping inside the Grid popup edit form? My column names are long and contain several words. They cannot fit on a single line and wrap.


There are two ways to ensure that long form labels fit on a single line in the popup. Both techniques use CSS. The required code is identical for Grids and TreeLists.

  • Increase the popup edit form width:

    .k-window .k-form-horizontal {
        min-width: 600px;
  • Prevent text wrapping of the form labels:

    .k-window .k-form-horizontal .k-form-label {
        white-space: nowrap;
        margin-left: 10px;

If you place the above CSS rules in the global app stylesheet (usually site.css), they will affect all popup forms in the app. To avoid this, keep the CSS code in the Razor file, which defines the edit form. CSS isolation (scoped styles) will not work, because the Window is rendered as a child of the page <body>, i.e. outside the Razor component.

For full control of the edit form layout and more advanced customizations, you can also use a custom edit form in a separate TelerikWindow.


Prevent label wrapping in popup edit forms

@* Prevent label wrapping in popup edit forms *@

    /* normally, only one of these CSS rules is enough */

    .k-window .k-form-horizontal {
        /* min-width: 600px; */

    .k-window .k-form-horizontal .k-form-label {
        white-space: nowrap;
        margin-left: 10px;

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Popup">
        <GridColumn Field=@nameof(Product.Name) Title="Product Name" />
        <GridColumn Field=@nameof(Product.Quantity) Title="Units in Stock" />
        <GridCommandColumn Width="120px">
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>

@code {
    public List<Product> GridData { get; set; }

    protected override void OnInitialized()
        GridData = new List<Product>();

        for (int i = 1; i <= 5; i++)
            GridData.Add(new Product()
                ID = i,
                Name = $"Product Name {i}",
                Quantity = i

    public class Product
        public int ID { get; set; }
        public string Name { get; set; }
        public int Quantity { get; set; }
In this article
Not finding the help you need? Improve this article