it-swarm.com.de

Horizontale Formularelemente

Ich habe das Formular beschrieben, aber jedes Element dort befindet sich unter dem vorherigen. Ich muss die Form beschreiben, in der alle Elemente horizontal, aber nicht vertikal platziert werden. Das ist meine Form:

function contact_register_form($form, &$form_state) {
  $form['description'] = array(
    '#type' => 'item',
    '#title' => t('Sign up to be notified when your community launches:'),
  );

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Add me',
  );    

  return $form;
}
12
RomanBadiornyi

Sie können Code ähnlich dem folgenden verwenden, der vom Modul Node in node_filter_form() verwendet wird.

  // Build the 'Update options' form.
  $form['options'] = array(
    '#type' => 'fieldset', 
    '#title' => t('Update options'), 
    '#attributes' => array('class' => array('container-inline')), 
    '#access' => $admin_access,
  );

  // ...

  $form['options']['operation'] = array(
    '#type' => 'select', 
    '#title' => t('Operation'), 
    '#title_display' => 'invisible', 
    '#options' => $options, 
    '#default_value' => 'approve',
  );

Der Schlüssel sind die Zeileneinstellungen des Attributs "#attributes" für "container-inline".

Dieser Code ist für Drupal 7; der entsprechende Code für Drupal 6 beginnt mit dem folgenden Code:

  $form['options'] = array(
    '#type' => 'fieldset', 
    '#title' => t('Update options'), 
    '#prefix' => '<div class="container-inline">', 
    '#suffix' => '</div>',
  );

Angenommen, Sie verwenden Drupal 6), dann sollte Ihr Code in einen ähnlichen Code wie den folgenden geändert werden:

function contact_register_form($form, &$form_state) {
  $form['description'] = array(
    '#type' => 'item',
    '#title' => t('Sign up to be notified when your community launches:'),
  );

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
    '#prefix' => '<div class="container-inline">', 
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Add me',
    '#suffix' => '</div>',
  );    

  return $form;
}

Ich habe die Beschreibung nicht inline gesetzt, da sie nicht korrekt gerendert wird, da ein Formularfeld "Element" verwendet wird. Ich finde auch, dass das Einfügen der Beschreibung dazu führen würde, dass das Formular zu viel Platz einnimmt. (Stellen Sie sich vor, was passieren würde, wenn die inline eingefügte Beschreibung länger und in einer einzelnen Zeile stehen würde.)

Die CSS-Stile, die Drupal 7 zu Container-Inline-Elementen hinzufügt, sind die folgenden.

/**
 * Inline items.
 */
.container-inline div,
.container-inline label {
  display: inline;
}
/* Fieldset contents always need to be rendered as block. */
.container-inline .fieldset-wrapper {
  display: block;
}

Sie werden von system.base.css hinzugefügt.

17
kiamlaluno