it-swarm.it

Elementi di forma orizzontale

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

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 usando 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, in quanto non verrebbe visualizzata 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 contenitore in linea 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 .

17
kiamlaluno