Sering kali ada pertanyaan bagaimana cara membuat form agar fieldnya sejajar secara vertikal dan sejajar dengan label. Drupal sudah memberikan pilihan posisi label yakni above (default), inline dan hidden.
Namun pengguna drupal masih juga kuran puas dengan posisi inline karena posisi input text nya tidak sejajar dari atas ke bawah, hanya sejajar dengan label. nah kalau panjang text label tidak sama maka akan terlihat kurang nyaman "reregean" dalam istilah inggris lidah sundanya.
Solusinya untuk mengatasi kebutuhan ini adalah dengan menggunakan css. Setelah mencari kesana kemari akhirya saya dapat satu script css untuk membuat input form sejajar. Harap diperhatikan class css ini bersifat global, jadi akan berlaku untuk seluruh input form yang ada pada instalasi drupal anda.
Jika anda menginginkan css ini hanya berlaku pada form - form tertentu saja harus anda tambahkan div id (#) atau tambahan .class lainnya yang sesuai dengan kebutuhan anda.
Baiklah tidak perlu panjang lebar, buka file style.css atau file css local pada folder sites/themes/nama_themes_anda.
lalu copy paste code script berikut, simpan lalu buka input form apa saja dan saksikan efeknya.
.form-item {
position: relative;
display: block;
width: 100%;
padding-top: 3px;
clear: both;
}
.form-item label {
width: 50%;
float: left;
display: inline;
text-align: left;
}
.form-item .form-text {
width: 40%;
float: left;
margin-left: 10px;
display: inline;
border: 1px solid #ccc;
}
.form-item textarea {
clear: both;
width: 100%;
display: block;
font-size: 110%;
border: 1px solid #ccc;
}
.form-item .description {
position: absolute;
left: 10%;
width: 200px;
display: none;
background-color: #caff9b;
}
.form-item .form-select {
margin-left: 10px;
}
Semoga bermanfaat dan menambah kebaikan di bulan Romadhon ini.
EmoticonEmoticon