Elementos de forma horizontal


12

Describí el formulario, pero cada elemento está ubicado debajo del anterior. Necesito describir la forma en que todos los elementos se colocarán horizontalmente pero no verticalmente. Esta es mi 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;
}

Respuestas:


17

Puede usar un código similar al siguiente, usado por el módulo Node en 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 clave es la configuración de línea del atributo "# atributos" a "contenedor en línea".

Ese código es para Drupal 7; El código equivalente para Drupal 6 comienza con el siguiente código:

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

Supongamos que está utilizando Drupal 6, entonces su código debe cambiarse a algo similar al siguiente:

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

No puse la descripción en línea, ya que no se representaría correctamente porque está usando un campo de formulario "elemento". También encuentro que al incluir la descripción, el formulario ocuparía demasiado espacio. (Imagine lo que sucedería si la descripción en línea fuera más larga y se colocara en una sola línea).

Los estilos CSS que Drupal 7 agrega a los elementos en línea de contenedor son los siguientes.

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

Se agregan desde system.base.css .


1
Y no olvide aplicar un floatCSS en la container-inlineclase.
tostinni

¿Hay alguna manera de hacer esto sin código? Tengo muy buen control en la visualización de formularios, pero a excepción de algunas columnas en DS extra, pero nada granular como el módulo de diseño de formulario web para datos de entrada de formulario
Bruno Vincent
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.