Горизонтальные элементы формы


12

Я описал форму, но каждый элемент находится под предыдущим. Мне нужно описать форму, где все элементы будут размещены горизонтально, но не вертикально. Это моя форма:

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

Ответы:


17

Вы можете использовать код, подобный следующему, который используется модулем Node в 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',
  );

Ключом строки является установка атрибута «#attributes» в значение «inline-container».

Этот код для Drupal 7; эквивалентный код для Drupal 6 начинается со следующего кода:

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

Предположим, что вы используете Drupal 6, тогда ваш код должен быть изменен на что-то похожее на следующее:

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

Я не поместил описание в строку, так как оно не будет корректно отображено, потому что оно использует поле формы «item». Я также считаю, что вставка описания приведет к тому, что форма займет слишком много места. (Представьте, что произойдет, если встроенное описание будет длиннее и помещено в одну строку.)

Ниже перечислены стили CSS, которые Drupal 7 добавляет к элементам, встроенным в контейнер.

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

Они добавлены из system.base.css .


1
И не забудьте применить класс floatв CSS container-inline.
Тостинни

Есть ли способ сделать это без кода? У меня есть очень хороший контроль над отображением форм, но за исключением нескольких столбцов в DS extra, но нет ничего гранулированного, как модуль макета веб-формы для ввода данных формы
Бруно Винсент,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.