Elementos de formulário horizontais


12

Eu descrevi o formulário, mas todos os elementos estão localizados abaixo do anterior. Preciso descrever a forma em que todos os elementos serão colocados na horizontal, mas não na vertical. Esta é a minha 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;
}

Respostas:


17

Você pode usar código semelhante ao seguinte, usado pelo módulo Nó em 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',
  );

A chave são as configurações de linha que o atributo "#attributes" atribui a "container-inline".

Esse código é para o Drupal 7; o código equivalente para o Drupal 6 começa com o seguinte código:

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

Supondo que você esteja usando o Drupal 6, seu código deve ser alterado para algo semelhante ao seguinte:

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

Não coloquei a descrição em linha, pois ela não seria renderizada corretamente porque está usando um campo de formulário "item". Também acho que incluir a descrição faria com que o formulário ocupasse muito espaço. (Imagine o que aconteceria se a descrição incorporada fosse mais longa e colocada em uma única linha.)

Os estilos CSS que o Drupal 7 adiciona aos elementos inline do contêiner são os seguintes.

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

Eles são adicionados a partir de system.base.css .


1
E não se esqueça de aplicar um floatCSS na container-inlineclasse.
tostinni 27/07

Existe uma maneira de fazer isso sem código? Eu tenho um controle muito bom em exposição formas, mas com exceção de algumas colunas em DS extras, mas nada granular como o módulo de layout webform para os dados de entrada de formulário
de Bruno Vincent
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.