Location and Alignment

Align Labels Relatively to Editors

By default, the Form widget displays labels at the left side of their editors. To relocate all labels, use the labelLocation option. You can do the same to an individual label using the label | location option.

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" }
        }]
    });
});

If the label is located at the top of the editor, it can be aligned relatively to the editor in the horizontal direction using the label | alignment option.

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" 
            }
        }]
    });
});

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:

JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            hireDate: new Date(2012, 04, 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"]
        }]
    });
});
See Also