Éléments de forme horizontaux


12

J'ai décrit le formulaire, mais chaque élément se trouve sous le précédent. J'ai besoin de décrire la forme où tous les éléments seront placés horizontalement mais pas verticalement. Voici ma forme:

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

Réponses:


17

Vous pouvez utiliser un code similaire au suivant, utilisé par le module Node dans 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 clé est les paramètres de ligne l'attribut "#attributes" à "conteneur en ligne".

Ce code est pour Drupal 7; le code équivalent pour Drupal 6 commence par le code suivant:

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

En supposant que vous utilisez Drupal 6, votre code devrait être changé en quelque chose de similaire au suivant:

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

Je n'ai pas mis la description en ligne, car elle ne serait pas correctement rendue car elle utilise un champ de formulaire "article". Je trouve également que l'inclusion de la description ferait prendre trop de place au formulaire. (Imaginez ce qui se passerait si la description intégrée était plus longue et placée sur une seule ligne.)

Les styles CSS que Drupal 7 ajoute aux éléments de conteneur en ligne sont les suivants.

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

Ils sont ajoutés à partir de system.base.css .


1
Et n'oubliez pas d'appliquer un floatCSS dans la container-inlineclasse.
tostinni

Existe-t-il un moyen de le faire sans code? J'ai un très bon contrôle sur l'affichage des formulaires, mais à l'exception de quelques colonnes dans DS supplémentaires, mais rien de granulaire comme le module de mise en page de formulaire Web pour les données d'entrée de formulaire
Bruno Vincent
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.