Elementi di forma orizzontale


12

Ho descritto il modulo, ma ogni elemento si trova sotto quello precedente. Devo descrivere la forma in cui tutti gli elementi saranno posizionati in orizzontale ma non in verticale. Questa è la mia forma:

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

Risposte:


17

Puoi usare un codice simile al seguente, usato dal modulo Node in 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',
  );

La chiave sono le impostazioni di linea dell'attributo "#attributes" su "container-inline".

Quel codice è per Drupal 7; il codice equivalente per Drupal 6 inizia con il seguente codice:

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

Supponendo che tu stia utilizzando Drupal 6, il tuo codice dovrebbe essere cambiato in qualcosa di simile al seguente:

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

Non ho inserito la descrizione in linea, poiché non verrebbe riprodotta correttamente perché utilizza un campo modulo "elemento". Trovo anche che l'interno della descrizione provocherebbe uno spazio eccessivo per il modulo. (Immagina cosa accadrebbe se la descrizione incorporata fosse più lunga e posizionata in una sola riga.)

Gli stili CSS che Drupal 7 aggiunge agli elementi in-container sono i seguenti.

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

Sono aggiunti da system.base.css .


1
E non dimenticare di applicare un floatin CSS alla container-inlineclasse.
tostinni,

C'è un modo per farlo senza codice? Ho un ottimo controllo sulla visualizzazione dei moduli, ma ad eccezione di alcune colonne in DS extra, ma niente di granulare come il modulo layout webform per i dati di input del modulo
Bruno Vincent
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.