FormLayoutItemBase.CaptionPosition Property

Specifies an item’s Caption position.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(CaptionPosition.Vertical)]
[Parameter]
public CaptionPosition CaptionPosition { get; set; }

Property Value

Type	Default	Description
CaptionPosition	Vertical	A CaptionPosition enumeration value.

Available values:

Name	Description
Vertical	Displays the caption above the associated editor.
Horizontal	Displays the caption to the left of the associated editor.

Remarks

Form Layout can display a caption above an item or at its left. Use CaptionPosition properties to position item captions. Individual settings have higher priority.

Positioned Elements	Property
A single caption.	DxFormLayoutItem.CaptionPosition
All captions in a group.	DxFormLayoutGroup.CaptionPosition
All captions in a tab.	DxFormLayoutTabPage.CaptionPosition
All captions in all tabs.	DxFormLayoutTabPages.CaptionPosition
All captions in the component.	DxFormLayout.CaptionPosition

If there is not enough space for the caption, Form Layout moves it above the associated editor (the Vertical position) regardless of the CaptionPosition property value.

<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage CaptionPosition="CaptionPosition.Horizontal" Caption="Booking information">
            <DxFormLayoutItem Caption="City:">
                <DxTextBox Text="Sydney"></DxTextBox>
            </DxFormLayoutItem>
            @* ... *@
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage CaptionPosition="CaptionPosition.Vertical" Caption="Chosen Dates">
            @* ... *@
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Run Demo: Form Layout - Caption Position