Horizontale Formularelemente


12

Ich habe das Formular beschrieben, aber jedes Element befindet sich unter dem vorherigen. Ich muss das Formular beschreiben, in dem 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;
}

Antworten:


17

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

  // 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 ist, in welcher Zeile das Attribut "#attributes" auf "container-inline" gesetzt wird.

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 in die Zeile eingefügt, da sie nicht korrekt wiedergegeben wird, da ein Formularfeld "item" 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 eingebettete Beschreibung länger wäre und in eine einzelne Zeile gesetzt würde.)

Die CSS-Stile, die Drupal 7 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 aus system.base.css hinzugefügt .


1
Und vergessen Sie nicht, ein floatin CSS auf die container-inlineKlasse anzuwenden .
Tostinni

Gibt es eine Möglichkeit, dies ohne Code zu tun? Ich habe sehr gute Kontrolle über die Anzeige von Formularen, aber bis auf ein paar Spalten in DS extra, aber nichts Granulares wie das Webformular-Layout-Modul für Formulareingabedaten
Bruno Vincent
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.