Skip to content

Toast hidden behind modal (z-index issue) #148

@erikgaas

Description

@erikgaas

Problem:

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

Repro:

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions