devextreme form label position

Mac Grediser

2 min read

·

27-11-2024

1

0

Share

Mastering DevExtreme Form Label Positioning: A Comprehensive Guide

DevExtreme's Form widget offers a flexible and powerful way to create data entry interfaces. However, controlling the precise position of labels within the form can sometimes present a challenge. This article will guide you through various techniques to master label positioning, ensuring your forms are both functional and aesthetically pleasing.

Understanding DevExtreme Form Structure:

Before diving into label positioning, it's crucial to understand the basic structure. DevExtreme Forms use a declarative approach, allowing you to define items within the items array. Each item typically represents a field, and within that field, you can specify the label. The default behavior places labels to the left of the input element. However, this can be customized extensively.

Method 1: Using the label Property within Items

The most straightforward approach to customizing label positioning is using the label property within each form item. This property accepts an object, offering several options:

• text: The label text itself.

• location: This is where you control the position. The available options are:

  • "left" (default): The label appears to the left of the input element.
  • "top": The label appears above the input element.
  • "right": The label appears to the right of the input element.
  • "hidden": The label is completely hidden.

const form = new DevExpress.ui.dxForm({
  items: [{
    dataField: "firstName",
    label: {
      text: "First Name",
      location: "top" // Label above the input
    }
  }, {
    dataField: "lastName",
    label: {
      text: "Last Name",
      location: "left" // Default: Label to the left
    }
  }]
});

Method 2: Using colCount and colSpan for Complex Layouts

For more complex layouts, you can leverage the colCount and colSpan properties. colCount defines the number of columns in the form layout, while colSpan determines how many columns an item occupies. This allows for precise control over label and input element positioning.

const form = new DevExpress.ui.dxForm({
  colCount: 2, // Two columns
  items: [{
    dataField: "firstName",
    colSpan: 2, // Occupies both columns
    label: {
      text: "First Name",
      location: "top"
    }
  }, {
    dataField: "lastName",
    colSpan: 1, // Occupies one column
    label: {
      text: "Last Name"
    }
  }, {
    dataField: "email",
    colSpan: 1, // Occupies one column
    label: {
      text: "Email"
    }
  }]
});

Method 3: Custom Templating for Advanced Control

For ultimate flexibility, you can use custom templating. This allows you to completely control the rendering of both the label and the input element, enabling complex positioning scenarios not easily achieved through built-in properties. This requires more advanced knowledge of HTML and JavaScript templating within DevExtreme.

Considerations for Accessibility:

Always prioritize accessibility. While creative label positioning can improve aesthetics, ensure sufficient contrast and clear visual separation between labels and input elements. Screen readers should easily associate labels with their corresponding input fields.

Conclusion:

DevExtreme's Form widget provides numerous options for fine-tuning label positioning. By understanding the label property, colCount, colSpan, and custom templating, you can create forms that are not only visually appealing but also user-friendly and accessible. Remember to choose the method that best suits your specific layout needs while keeping accessibility best practices in mind.