องค์ประกอบรูปแบบแนวนอน


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

ฉันไม่ได้ใส่คำอธิบายไว้ในบรรทัดเนื่องจากไม่สามารถแสดงผลได้อย่างถูกต้องเพราะใช้ช่องแบบฟอร์ม "รายการ" ฉันยังพบว่าการใส่คำอธิบายลงในนั้นจะทำให้แบบฟอร์มใช้พื้นที่มากเกินไป (ลองนึกภาพว่าจะเกิดอะไรขึ้นหากคำอธิบายแบบอินไลน์จะยาวขึ้นและวางไว้ในบรรทัดเดียว)

สไตล์ 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
และอย่าลืมใช้floatCSS ในcontainer-inlineคลาส
tostinni

มีวิธีการทำเช่นนี้โดยไม่มีรหัสหรือไม่? ฉันมีการควบคุมที่ดีมากในการแสดงผลแบบฟอร์ม แต่ยกเว้นคอลัมน์บางส่วนใน DS Extra แต่ไม่มีอะไรละเอียดเหมือนโมดูล webform layout สำหรับข้อมูลอินพุตแบบฟอร์ม
Bruno Vincent
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.