apa itu overlay x dan overlay y

 

Sekarang kita bahas overlay-x dan overlay-y.

Dalam konteks Frappe Builder (atau UI builder secara umum), overlay-x dan overlay-y biasanya mengacu ke pengaturan overflow pada sumbu horizontal (x) dan vertikal (y)—mirip dengan properti CSS overflow-x dan overflow-y.

Pengertian:

• overlay-x → mengatur overflow secara horizontal (kiri–kanan)

• overlay-y → mengatur overflow secara vertikal (atas–bawah)

Opsi yang Umum Digunakan (mirip dengan CSS overflow-x dan overflow-y):

Opsi	Penjelasan
visible	Konten meluber ke luar batas elemen tanpa dipotong.
hidden	Konten yang melampaui batas akan dipotong, tidak bisa discroll.
scroll	Scrollbar selalu ditampilkan, walaupun kontennya tidak terlalu banyak.
auto	Scrollbar hanya muncul jika kontennya overflow.
unset	Menghapus nilai sebelumnya (kembali ke default browser/inherit).

Contoh Praktis:

Misalnya kamu punya container yang lebarnya fixed:

<div style="width: 300px; overflow-x: auto;">
   <!-- konten panjang ke kanan -->
</div>

Kalau:

• overlay-x: auto → Scroll muncul kalau konten lebih lebar dari 300px

• overlay-x: hidden → Konten di luar 300px tidak kelihatan

• overlay-x: visible → Konten tetap tampil walau melebihi lebar

• overlay-x: scroll → Scrollbar horizontal selalu tampil

Dan sama logikanya untuk overlay-y, tapi ke arah atas–bawah.

Dalam Frappe Builder:

Saat kamu atur overlay-x atau overlay-y, kamu sedang menentukan bagaimana kontainer menangani konten yang tidak muat dalam arah tertentu.

Biasanya ini dipakai untuk:

• Membuat card atau section dengan scroll vertikal

• Menangani konten tabel lebar di halaman

• Membatasi tampilan teks panjang di komponen tertentu