Skip to content Skip to sidebar Skip to footer

Mengatasi Masalah Scrollable Select di Template Materialize

Baru-baru ini saya mencoba template Materialize, yaitu template yang mana desainnya terinspirasi dari Material Design punya Google.

Bagusnya lagi, template ini boleh kita pakai dan modifikasi karena lisensinya yang Open Source.

Tapi saya mengalami kendala ketika ingin menampilkan item menggunakan elemen Select di HTML.

Scrollable menjadi tidak responsif ketika saya menscroll item-itemnya, ada beberapa yang tidak tampak padahal isinya hanya 8 item!


Bisa dilihat dari gambar di atas, masih ada satu item lagi yang seharusnya tampil tapi tidak bisa di scroll lagi. 😅

Masalah:

Akhirnya, saya ketemu masalahnya lagi-lagi di Stackoverflow soalnya kalau di blog lain belum ada yang bahas masalah seperti ini sejauh yang saya tahu.

Materialize yang saya gunakan sekarang masih versi yang lama, 0.100.2.

Beberapa dari mereka bilang karena masalah tidak cocok/compatibility isu di browser Chrome...

...ada juga yang bilang karena masalah DOM yang terkunci jadi maksudnya kalau dibuka di laptop dia bakalan nutupin sampai ke bawah layar.

Solusi:

Jadi, solusinya ada yang perlu diubah pada bagian kode Materialize CSSnya:

1. Pertama cari kode dropdown-content seperti berikut:
.dropdown-content
2. Kemudian cari pada bagian max-height:70%, ubah menjadi:
max-height:250px;
3. Lalu tambah kode css berikut ke dalam class .dropdown-content, sehingga menjadi:
.dropdown-content {
	max-height: 250px;
    overflow-y: auto !important;
    backface-visibility: hidden !important;
}
Jika sudah, silahkan save file css tersebut dan jika tak ada masalah harusnya berhasil dan itemnya bisa di Scroll lagi.


Sekian tutorial kali ini, jika kamu masih ada kendala lain silahkan komen di kolom komentar di bawah ini. 😊

Source link: Materialize select scrolling issue (Stackoverflow)
Rinaldi Pratama Putra
Rinaldi Pratama Putra Reality is a lovely place, but I wouldn't want to live there.