AnswerDotAI / AnswerDotAI/MonsterUI

Toast hidden behind modal (z-index issue)

Open
#148 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Jupyter Notebook
Stars
522
Forks
33
Avg merge
1m
Merged PRs (30d)
1

Description

**Problem:**

When triggering a toast while a modal is open, the toast appears in the DOM but is hidden behind the modal overlay.

**Repro:**

```python
from fasthtml.common import *
from monsterui.all import *

hdrs = Theme.blue.headers()
app, rt = fast_app(hdrs=hdrs)
setup_toasts(app)

@rt
def index():
return Titled('Toast + Modal Test',
Button('Open Modal', uk_toggle='target: #test-modal'),
Modal(Button('Trigger Toast', hx_post='/toast', hx_swap='none'), id='test-modal', header='Test Modal'))

@rt
def toast(sess):
add_toast(sess, 'User not found!', 'error')

serve()
```

1. Click 'Open Modal'
2. Click 'Trigger Toast'
3. Toast is in the DOM but not visible (hidden behind modal)

**Expected:** Toast should appear above the modal.

**Likely fix:** `fh-toast-container` needs a higher `z-index` than the modal overlay.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.