Home > Internet > Drupal > Membuat Tampilan Form Inline Pada Drupal 7.

Membuat Tampilan Form Inline Pada Drupal 7.

Weh, seminggu lebih belum ada postingan baru.

Okay, sekarang saya mau posting tentang drupal lagi :D. Mas, kok drupal terus sih? Ga boleh to? Mumpung lagi semangat belajar drupal nih, jadi sepertinya postingan diblog ini akan masih tentang drupal terus.

Adakah yang memperhatikan kalau tampilan form pada drupal itu hampir selalu label berada diatas form element, entah itu textbox, textarea, dropdown, dll. Contohnya seperti berikut:

Tampilan tidak inline

Terus bagaimana caranya biar bisa inline? Tenang, setelah saya searching kesana kemari. Akhirnya ketemu solusinya, yaitu:

1. Tambahkan kontainer pada form element tersebut.

Kontainer ini buat apa ya? Kontainer ini gunanya untuk mengelompokkan, object-object form. Contoh kode untuk pengelompokkan ini sebagai berikut:

  $form['container_search'] = array(
    '#type' => 'container',
  );

  $form['container_search']['searchtext'] = array(
      '#type'         => 'textfield',
      '#title'        => t('Keyword'),
      '#size'         => 30,
      '#attributes'   => array(
          'placeholder' => t('Type username here'),
      )
  );

  $form['container_search']['search'] = array(
    '#type'     => 'submit',
    '#value'    => t('Search'),
    '#validate' => array('rst_user_search_validate'),
    '#submit'   => array('rst_user_search'),
  );

Kode diatas akan mengelompokkan object textbox searchtext dan button search. Tampilannya seperti berikut:

Container

2. Tambahkan CSS agar tampilannya inline.

Agar kontainer tersebut bisa inline (segaris), maka perlu ditambahkan css pada kontainer. Berikut contoh kodenya:

  $form['container_search'] = array(
    '#type' => 'container',
    '#attributes' => array('class' => array('container-inline', 'container-search')),
  );

Hasilnya adalah sebagai berikut:

Inline

Selesai.

Bagaimana? Cukup mudah bukan?

You may also like
Tutorial Mengganti Keyboard Pada Laptop Acer Aspire 4920
Cara Memasang Temper Glass di Smartphone
Drupal: Bulk Insert
Ciyeee, Drupal dan WordPress minta update barengan.