水平フォーム要素


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」属性を「container-inline」に設定する行です。

そのコードは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;
}

「アイテム」フォームフィールドを使用しているため、正しく表示されないため、説明をインラインに配置しませんでした。また、説明をインライン化すると、フォームのスペースが大きくなりすぎることがわかります。(インラインの説明が長くなり、1行に配置されるとどうなるかを想像してください。)

Drupal 7がコンテナーインライン要素に追加するCSSスタイルは次のとおりです。

/**
 * 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
またfloatcontainer-inlineクラスにin CSSを適用することを忘れないでください。
-tostinni

コードなしでこれを行う方法はありますか?フォームの表示を非常によく制御できますが、DS extraのいくつかの列を除きますが、フォーム入力データのwebformレイアウトモジュールのように細かいものはありません
ブルーノヴィンセント
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.