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

Read More

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.

Read More

apa itu overlay pada frappe builder

 

Dalam konteks Frappe Builder (biasanya merujuk ke Frappe UI Builder atau Page Builder), "overlay" mengacu pada elemen visual yang muncul di atas elemen lainnya, biasanya untuk menunjukkan bahwa sesuatu bisa diedit, dipilih, atau sedang dalam mode interaktif.

Penjelasan Singkat:

Overlay adalah lapisan tambahan yang muncul di atas elemen ketika kamu sedang mengedit halaman menggunakan UI Builder Frappe. Overlay ini tidak muncul pada tampilan pengguna akhir (frontend), hanya pada saat kamu sedang membangun atau mengatur halaman.

Fungsi Umum Overlay di Frappe Builder:

1. Menunjukkan area yang dapat diedit.

2. Memberikan kontrol tambahan, seperti tombol edit, hapus, duplikat, atau drag (geser untuk mengatur posisi).

3. Mempermudah pengorganisasian komponen seperti kartu, section, row, dan column.

Contoh Kasus:

Misalnya kamu membuat halaman menggunakan Page Builder di Frappe dan menambahkan "Card Component". Saat kamu mengarahkan mouse ke komponen tersebut, akan muncul overlay dengan:

• Border (biasanya biru atau abu-abu)

• Tombol-tombol seperti "Edit", "Remove", atau "Move"

• Ikon gear (⚙️) untuk pengaturan lanjutan

Kesimpulan:

Overlay di Frappe Builder adalah lapisan visual bantu yang muncul saat mengedit, bukan bagian dari tampilan publik, dan sangat berguna untuk memudahkan kamu saat membangun layout halaman.

Read More