Perbesar textarea rencana mingguan RPS saat fokus
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:
@@ -152,7 +152,7 @@ input[type="text"], input[type="number"], input[type="password"], textarea, sele
|
|||||||
border: 1px solid #999; background: #fff;
|
border: 1px solid #999; background: #fff;
|
||||||
padding: 4px 6px; width: 100%;
|
padding: 4px 6px; width: 100%;
|
||||||
}
|
}
|
||||||
textarea { resize: vertical; }
|
textarea { resize: both; }
|
||||||
input:focus, textarea:focus, select:focus {
|
input:focus, textarea:focus, select:focus {
|
||||||
outline: 2px solid var(--blue); outline-offset: 0;
|
outline: 2px solid var(--blue); outline-offset: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -72,4 +72,48 @@
|
|||||||
var kosong = wadah.querySelector(".cari-kosong");
|
var kosong = wadah.querySelector(".cari-kosong");
|
||||||
if (kosong) kosong.style.display = ada ? "none" : "";
|
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);
|
||||||
|
});
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user