Align Labels Relatively to Editors
The Form widget displays labels on the left side of their editors and aligns them to the left. Use the labelLocation option to relocate all labels or the label.location option to relocate individual labels. To align labels horizontally, set the label.alignment option.
jQuery
$(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", alignment: "right" // or "left" | "center" } }] }); });
Angular
<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" alignment="right"> <!-- or "left" | "center" --> </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. The labels of the editors that occupy much screen space like the Calendar, TextArea, and RadioGroup are aligned at the top, but you can center them using the following code:
.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:
- alignItemLabels - for all root simple items;
- alignItemLabelsInAllGroups - for all simple items nested in all groups;
- Group Item.alignItemLabels - for simple items nested in a specific group;
- Tabbed Item.tabs[].alignItemLabels - for simple items nested in a specific tab.
jQuery
$(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
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.