0

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.

edit form

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;
  }

}
  • Your examples could both be done with simple CSS, no need to write any code – Clive Apr 15 '16 at 12:46
  • @Clive Can you provide me an example? Should I add a custom CSS class on divs containing form fields? – Andrea Apr 15 '16 at 12:57
  • Is this code part of a custom module? – Kevin Nowaczyk May 5 '16 at 13:33
  • @KevinNowaczyk yes, it is a custom module for a custom field type. – Andrea May 5 '16 at 14:36
2

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';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.