Telerik
/
blazor-docs
зеркало из https://github.com/telerik/blazor-docs.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
blazor-docs/knowledge-base/grid-popup-edit-form-disabl...

3.2 KiB
Исходник Постоянная ссылка Ответственный История

title description type page_title slug position tags ticketid res_type
Disable Label Wrapping in the Grid Popup Edit Form How to prevent label text wrapping in the popup editor of the Grid and TreeList. how-to Disable Label Wrapping in the Grid Popup Edit Form grid-popup-edit-form-disable-label-wrapping grid,popup,edit,form,label,wrap 1544767 kb

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)]({%slug common-kb-css-isolation%}) 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

caption 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="@SvgIcon.Pencil">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; }
    }
}