Louis Whittington
df06dcc0d7
- Added a modal for editing person details, including name, role, favorite color, birthday, and description. - Implemented visibility toggling for PIN input based on role selection, ensuring security for Head of Household. - Introduced birthday reminder functionality in the calendar, generating events for upcoming birthdays with appropriate notifications. - Updated calendar and settings UI to accommodate new features, improving user experience and data management.
23 lines
1.5 KiB
Plaintext
23 lines
1.5 KiB
Plaintext
---
|
|
description: Bootstrap modal backdrop — avoid blocking forms
|
|
globs:
|
|
alwaysApply: true
|
|
---
|
|
|
|
## Bootstrap 5 modals (Family Hub)
|
|
|
|
The default modal **backdrop** has repeatedly caused **stacking / pointer-event problems** where the dimmed overlay sits above the dialog and **blocks clicks and focus** on fields inside the modal.
|
|
|
|
**For modals that contain forms or other interactive controls:**
|
|
|
|
1. On the root `.modal` element, set **`data-bs-backdrop="false"`**.
|
|
2. When constructing the instance in JavaScript, pass **`{ backdrop: false }`** to `new bootstrap.Modal(element, …)` so behavior stays correct even if markup changes.
|
|
|
|
Users can still close the dialog with **Close**, **Cancel**, or other explicit dismiss controls.
|
|
|
|
**Existing examples in this repo:** `tabs/meals.php` (`mealSlotModal`, `mealImportModal`); `assets/js/main.js` (`mealSlotModal` uses `{ backdrop: false }`).
|
|
|
|
Do **not** rely on the default backdrop for interactive modals unless you have verified it does not intercept input on the target devices/browsers.
|
|
|
|
**Ancestors with `transform`:** Any non-`none` `transform` on a parent (e.g. `.card:hover { transform: translateY(...) }`) creates a **containing block** for `position: fixed`, so Bootstrap modals inside that subtree render relative to the transformed ancestor and appear clipped. Family Hub card hover lift uses **box-shadow only** (no translate) for this reason; do not reintroduce transform-based card hover without moving modals to `document.body` or an untransformed shell.
|