DxComboBox<TData, TValue>.DropDownWidthMode Property

Specifies the width of the drop-down list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
[DefaultValue(DropDownWidthMode.ContentOrEditorWidth)]
public DropDownWidthMode DropDownWidthMode { get; set; }

Property Value

Type Default Description
DropDownWidthMode

ContentOrEditorWidth

A DropDownWidthMode enumeration value.

Available values:

Name Description
ContentOrEditorWidth

The list displays item text completely. The minimum list width matches the editor.

ContentWidth

The list width is equal to the width of the longest list item.

EditorWidth

The list width matches the editor. List items are cut if they do not fit.

Remarks

Use the DropDownWidthMode property to specify the width of the drop-down list. The following values are available:

  • ContentOrEditorWidth (Default) - The list displays item text completely. The minimum list width matches the editor.

    ComboBox Content or Editor Width

  • ContentWidth - The list width is equal to the width of the longest list item.

    ComboBox Content Width

  • EditorWidth - The list width matches the editor. List items are cut if they do not fit.

    ComboBox Editor Width

NOTE

When the ComboBox loads items on demand (ListRenderMode is set to Virtual), the list width can change while users scroll items.

The following code sets the width of the drop-down list to the editor width.

@using BlazorApp.Data

<DxComboBox Data="@Staff.DataSource"
            @bind-Value="@Value"
            TextFieldName="@nameof(Person.Text)"
            DropDownWidthMode="DropDownWidthMode.EditorWidth">
</DxComboBox>

@code {
  Person Value { get; set; } = Staff.DataSource[0];
}

Run Demo: ComboBox – Drop-Down List Width

See Also