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

Disable Label Wrapping in the Grid Popup Edit Form

Environment

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

Description

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.

Solution

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.

Example

Prevent label wrapping in popup edit forms

@* Prevent label wrapping in popup edit forms *@

<style>
    /* 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;
    }
</style>

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Popup">
    <GridColumns>
        <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>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@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