How do I change the edit form layout for a custom field type

Question

I created an Address custom field type, with two text fields (street and city).

When I add a new Address field on a content type, I get this form inside the edit page.

How can I change the layout of the form above?

For example, I would like to add some space between the Street text line and the City label, or display both fields on the same line.

This is the code for the AddressDefaultWidget class.

/**
 * Field type widget implementation.
 *
 * @FieldWidget(
 *   id = "AddressDefaultWidget",
 *   label = @Translation("Address select"),
 *   field_types = {
 *     "Address"
 *   }
 * )
 */
class AddressDefaultWidget extends WidgetBase {

  /**
   * Define the form for the field type.
   */
  public function formElement(
    FieldItemListInterface $items,
    $delta, 
    Array $element, 
    Array &$form, 
    FormStateInterface $formState
  ) {

    // Street

    $element['street'] = [
      '#type' => 'textfield',
      '#title' => t('Street'),
      '#default_value' => isset($items[$delta]->street) ? 
          $items[$delta]->street : null,
      '#empty_value' => '',
      '#placeholder' => t('Street'),
    ];

    // City

    $element['city'] = [
      '#title' => t('City'),
      '#type' => 'textfield',
      '#default_value' => isset($items[$delta]->city) ? 
          $items[$delta]->city : null,
      '#empty_value' => '',
      '#placeholder' => t('City'),
    ];

    return $element;
  }

}

Answer 1

This is off the top of my head, so there might be a few kinks. The way I would do it would be to:

1. Add a new class to each of the form elements that your module produces
2. Create some CSS to pad the top/bottom of elements with this class
3. Tell Drupal to include this CSS file whenever the form elements are on the page

In your Widget file add the following to each element to add an additional class to the form elements.

'#attributes' => [
  'class' => 'address_widget_class',
],

To add CSS styles to a custom module, you will need to create a few files and directories.

• module/module.libraries.yml
• module/css/style.css

In your CSS file, add the following to add 10 pixels above and below each item.

.address_widget_class {
  margin: 10px 0;
}

Next, you need to tell Drupal that the CSS file exists. In the module.libraries.yml file, add the following code.

style_name:
  version: 1.x
  css:
    component:
      css/style.css: {}

Finally, to include the library when the element is used, add the following to your Widget.

$element['street']['#attached']['library'][] = 'module/style_name';