JavaScript/jQuery Form - Location and Alignment

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.

App.js
  • 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:

CSS
  • .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:

App.js
  • 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