opsi overlay dalam konteks properti CSS

 

Oke, sekarang kita bahas opsi overlay dalam konteks properti CSS (karena Frappe Builder sering kali membungkus atau expose properti CSS), terutama kalau kamu ngatur style elemen atau komponen di UI builder-nya Frappe.

Kalau kamu lihat opsi seperti:

• unset

• auto

• visible

• hidden

• scroll

Itu kemungkinan besar berkaitan dengan overflow CSS atau sejenis properti tampilan visibility/scroll pada elemen.

Mari kita bedah satu per satu 

1. unset

• Artinya: Menghapus nilai sebelumnya dan mengembalikannya ke default, tergantung pada apakah elemen itu mewarisi nilai dari parent atau tidak.

• Gunanya: Kalau kamu sebelumnya mengatur overflow: hidden atau visible, lalu kamu pilih unset, maka Frappe akan membiarkannya kembali ke pengaturan awal (default browser).

2. auto

• Artinya: Scrollbar hanya akan muncul jika memang dibutuhkan (kontennya melebihi ukuran kontainer).

• Gunanya: Digunakan untuk membiarkan kontainer menyesuaikan scroll secara otomatis jika konten overflow.

3. visible

• Artinya: Overflow ditampilkan di luar batas elemen. Tidak akan terpotong atau disembunyikan.

• Gunanya: Biar konten yang lebih besar dari kontainer tetap kelihatan, bahkan jika meluber.

4. hidden

• Artinya: Konten yang melebihi batas elemen akan disembunyikan, tidak bisa di-scroll.

• Gunanya: Biasanya untuk memastikan tampilan tetap rapi dan tidak “meluber” keluar batas kotak.

5. scroll

• Artinya: Scrollbar selalu ditampilkan, meskipun konten tidak melebihi batas.

• Gunanya: Untuk memastikan user tahu bahwa konten itu bisa discroll, atau kalau kamu mau konsistensi tampilan (misalnya layout grid sejajar antara elemen yang pakai scroll dan tidak).

Hubungannya dengan Frappe Builder:

Kalau kamu lagi ngatur tampilan komponen dan disuruh pilih salah satu dari opsi di atas, itu artinya kamu sedang menentukan bagaimana konten di dalam komponen itu harus ditangani kalau melebihi batas kontainer.

Biasanya muncul di bagian pengaturan Layout / Style / Overflow / Advanced Styling.

Contoh:

Misalnya kamu punya div di dalam card yang kamu isi dengan banyak teks. Kalau kamu atur:

• overflow: hidden → teks yang keluar akan dipotong.

• overflow: scroll → kamu bisa scroll kontennya walaupun isinya sedikit.

• overflow: auto → akan muncul scrollbar hanya kalau isi terlalu banyak.