Align Labels Relatively to Editors
The Form UI component displays labels on the left side of their editors and aligns them to the left. Use the labelLocation property to relocate all labels or the label.location property to relocate individual labels. To align labels horizontally, set the label.alignment property.
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 ], // ... })
Vue
<template> <DxForm :form-data="employee" label-location="top"> <!-- or "left" | "right" --> <DxSimpleItem data-field="firstName" /> <DxSimpleItem data-field="lastName" /> <DxSimpleItem data-field="phone"> <DxLabel location="left" alignment="right" /> <!-- or "left" | "center" --> </DxSimpleItem> </DxForm> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxForm, DxSimpleItem, DxLabel } from 'devextreme-vue/form'; const employee = { firstName: 'John', lastName: 'Heart', phone: '+1(360)684-1334' }; export default { components: { DxForm, DxSimpleItem, DxLabel }, data() { return { employee }; }, }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Form, SimpleItem, Label } from 'devextreme-react/form'; const employee = { firstName: 'John', lastName: 'Heart', phone: '+1(360)684-1334' }; class App extends React.Component { render() { return ( <Form formData={employee} labelLocation="top"> { /* or "left" | "right" */ } <SimpleItem dataField="firstName" /> <SimpleItem dataField="lastName" /> <SimpleItem dataField="phone"> <Label location="left" alignment="right" /> { /* or "left" | "right" */ } </SimpleItem> </Form> ); } } export default App;
If a label's position is left or right, the label's vertical alignment depends on the control type:
Control Type | Default Vertical Alignment |
---|---|
Single-line editors | Middle |
Multi-line editors and bigger controls | Top |
The code below changes the default vertical alignment for a label to the middle:
.dx-label-h-align { align-items: center; }
Align Editors Relatively to Each Other
By default, the UI component 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 ], // ... })
Vue
<template> <DxForm :form-data="employee" :align-item-labels="false" :align-item-labels-in-all-groups="false"> <DxSimpleItem data-field="firstName" /> <DxSimpleItem data-field="lastName" /> <DxGroupItem caption="Contacts"> <DxSimpleItem data-field="phone" /> <DxSimpleItem data-field="email" /> </DxGroupItem> <DxGroupItem caption="Misc Data"> <DxSimpleItem data-field="position" /> <DxSimpleItem data-field="city" /> </DxGroupItem> </DxForm> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxForm, DxSimpleItem, DxGroupItem } from 'devextreme-vue/form'; const 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' }; export default { components: { DxForm, DxSimpleItem, DxGroupItem }, data() { return { employee }; }, }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Form, SimpleItem, GroupItem } from 'devextreme-react/form'; const 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' }; class App extends React.Component { render() { return ( <Form formData={employee} alignItemLabels={false} alignItemLabelsInAllGroups={false}> <SimpleItem dataField="firstName" /> <SimpleItem dataField="lastName" /> <GroupItem caption="Contacts"> <SimpleItem dataField="phone" /> <SimpleItem dataField="email" /> </GroupItem> <GroupItem caption="Misc Data"> <SimpleItem dataField="position" /> <SimpleItem dataField="city" /> </GroupItem> </Form> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.