Ada yang pernah memperhatikan bagian Pager (class ew-pager-form) di halaman List dari Aplikasi Web yang dihasilkan oleh PHPMaker 2022? Jika kita lihat lebih teliti, ada tiga sub-bagian yang terdapat di dalam bagian Pager, yaitu: navigasi halaman (class ew-pager), informasi record yang ditampilkan (class ew-pager ew-rec), dan pilihan untuk menampilkan jumlah record (class ew-pager).
Jika halaman List ditampilkan dalam mode Desktop atau di layar monitor Desktop yang lebar, ketiga sub-bagian tadi kelihatan normal dan baik-baik saja. Permasalahan timbul ketika halaman List tersebut ditampilkan dalam mode Mobile atau di layar monitor yang sempit seperti di Handphone. Ketiganya dipaksakan tetap berada dalam satu baris.
Mengapa? Karena kode CSS yang digunakan oleh class ew-pager-form di atas adalah seperti ini:
.ew-pager-form {
display: inline-flex;
}
Karena bagian ew-pager-form menggunakan inline-flex, maka ketiga sub-bagian yang terdapat di dalamnya menjadi dipaksakan tetap kelihatan dalam satu baris. Perhatikan bahwa sub-bagian kedua atau ketiga menjadi berantakan. Yang paling jeleknya adalah, sub-bagian ketiga bisa melewati dari batas maksimal lebar table pada mode Mobile tadi.
Tentu saja hal ini tidak bagus kelihatan dalam layar Handphone. Istilahnya, sudah tidak jelas terbaca karena ada elemen yang dipersempit lebarnya, eeeh malah menjadi tidak responsive design lagi. Hmmm…
Pertanyaannya, bagaimana cara supaya ketiga sub-bagian di dalam bagian ew-pager-form tadi menjadi responsive-design sekaligus bisa terbaca dengan jelas pada layar Handphone? Pertanyaan yang bagus!
Jawabannya pun cukup bagus. Sederhana saja. Cukup tambahkan sedikit kode CSS berikut ke bagian HTML -> Styles -> User:
.ew-pager-form {
display: inline-block;
}
Karena sekarang kita sudah menggunakan inline-block, maka jika bagian Pager ditampilkan pada layar yang lebarnya sempit, akan otomatis pindah ke bawah, sehingga setiap elemen di ketiga sub-bagian tadi menjadi terbaca dengan jelas.
Setelah itu, pastikan kita sudah men-generate ulang semua file script seperti biasa dengan menggunakan PHPMaker 2022. Kemudian cobalah sekarang tampilkan kembali halaman List pada mode Mobile atau di layar monitor yang sempit, kita akan melihat ketiga sub-bagian tersebut ditampilkan lebih baik dari yang sebelumnya.
Dan yang paling penting, sekarang bagian Pager di halaman List tadi sudah responsive-design.
Keren kan? Cukup dengan sedikit kode itu saja, kita sudah bisa membuat bagian Pager kelihatan lebih baik daripada yang sebelumnya.
Tinggalkan Balasan