izu/OBE-Mapping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perbesar textarea rencana mingguan RPS saat fokus

Browse Source 
Tabel F (9 kolom x 16 baris) membuat textarea-nya kecil dan susah dibaca/
diedit. Sekarang textarea di tabel itu membesar & mengambang (position:fixed,
z-index) saat diklik, tanpa mengubah lebar/tinggi tabel di baliknya, lalu
kembali normal saat pindah fokus. Semua textarea juga bisa di-resize bebas
(lebar+tinggi) sebagai jaring pengaman tambahan.

Perubahan murni CSS/JS statis -- tidak ada migrasi data.
This commit is contained in:
Power BI Dev
2026-07-22 09:40:19 +07:00
parent 5f615aa7e8
commit 34a64a997b
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/style.css
+1 -1
View File
@@ -152,7 +152,7 @@ input[type="text"], input[type="number"], input[type="password"], textarea, sele
border: 1px solid #999; background: #fff;
padding: 4px 6px; width: 100%;
}
textarea { resize: vertical; }
textarea { resize: both; }
input:focus, textarea:focus, select:focus {
outline: 2px solid var(--blue); outline-offset: 0;
}
app/static/tabel.js
+44
View File
@@ -72,4 +72,48 @@
var kosong = wadah.querySelector(".cari-kosong");
if (kosong) kosong.style.display = ada ? "none" : "";
});
/* Tabel rencana mingguan RPS (#tabel-f): kolomnya sempit untuk 9 kolom x
16 baris, jadi textarea-nya kecil sekali. Saat fokus, textarea membesar
dan "mengambang" (position:fixed) di atas sel-sel lain tanpa mengubah
lebar tabel; kembali normal saat pindah fokus. */
var grAktif = null;
function grBesarkan(el) {
if (grAktif === el) return;
if (grAktif) grKecilkan(grAktif);
var r = el.getBoundingClientRect();
el.dataset.grLebar = el.style.width;
el.dataset.grTinggi = el.style.height;
el.style.position = "fixed";
el.style.left = r.left + "px";
el.style.top = r.top + "px";
el.style.width = Math.max(r.width, 380) + "px";
el.style.height = Math.max(r.height, 140) + "px";
el.style.zIndex = "50";
el.style.boxShadow = "0 6px 18px rgba(0,0,0,.35)";
el.style.background = "#fff";
grAktif = el;
}
function grKecilkan(el) {
el.style.position = "";
el.style.left = "";
el.style.top = "";
el.style.width = el.dataset.grLebar || "";
el.style.height = el.dataset.grTinggi || "";
el.style.zIndex = "";
el.style.boxShadow = "";
el.style.background = "";
if (grAktif === el) grAktif = null;
}
document.addEventListener("focusin", function (ev) {
if (ev.target.matches && ev.target.matches("#tabel-f textarea")) {
grBesarkan(ev.target);
}
});
document.addEventListener("focusout", function (ev) {
if (ev.target === grAktif) grKecilkan(ev.target);
});
})();