Location and Alignment

Align Labels Relatively to Editors

The Form widget displays labels on the left side of their editors by default. Use the labelLocation option to relocate all labels or the label.location option to relocate individual labels.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            phone: "+1(360)684-1334"
        },
        labelLocation: "top", // or "left" | "right"
        items: ["firstName", "lastName", { 
            dataField: "phone",
            label: { location: "left" }
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    labelLocation="top"> <!-- or "left" | "right" -->
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="phone">
        <dxo-label
            location="left">
        </dxo-label>
    </dxi-item>
</dx-form>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        phone: "+1(360)684-1334"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

If the label is above the editor, it can be aligned horizontally in relation to the editor using the label.alignment option.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            phone: "+1(360)684-1334"
        },
        labelLocation: "top",
        items: ["firstName", "lastName", { 
            dataField: "phone",
            label: { 
                alignment: "center" // or "left" | "right" 
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    labelLocation="top">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="phone">
        <dxo-label
            alignment="center"> <!-- or "left" | "right" -->
        </dxo-label>
    </dxi-item>
</dx-form>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        phone: "+1(360)684-1334"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

A label placed on the left or right side of the editor is centered vertically in most cases, except for labels that are coupled with editors that occupy much space, like the Calendar, TextArea or RadioGroup. These labels are aligned at the top, but you can center them using the following code:

CSS
.dx-label-h-align {
    align-items: center;
}

Align Editors Relatively to Each Other

By default, the widget aligns all editors of all simple items in straight columns. To disable alignment, assign false to:

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            hireDate: new Date(2012, 4, 13),
            city: "Los Angeles",
            position: "CEO",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        alignItemLabels: false,
        alignItemLabelsInAllGroups: false,
        items: ["firstName", "lastName", {
            itemType: "group",
            caption: "Contacts",
            items: ["phone", "email"]
        }, {
            itemType: "group",
            caption: "Misc Data",
            items: ["position", "city"]
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [alignItemLabels]="false"
    [alignItemLabelsInAllGroups]="false">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item itemType="group"
        caption="Contacts"
        [items]="['phone', 'email']">
    </dxi-item>
    <dxi-item itemType="group"
        caption="Misc Data"
        [items]="['position', 'city']">
    </dxi-item>
</dx-form>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        hireDate: new Date(2012, 4, 13),
        city: "Los Angeles",
        position: "CEO",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
See Also