AlertDialog is opened out of view on large webpages

[Runtemund]

Steps to reproduce:

• Open [https://dioxuslabs.com/]
• Open the AlertDialog example directly or click on that card to open the detail page.
• Click Show Alert Dialog

Found behaviour

On click the Alert Dialog appears outside the actual view window or scrolls the view (depending on browser)

Expected behaviour

On click the Alert Dialog appear in the middle of the actual view window without changing any scroll position.

Browsers

• Safari (on Mac): AlertDialog opens down out of view. You must scroll to get it (see image)
• Firefox (on Mac) Page scrolls to dialog. This is not a solution because the user looses his position of the view, which can be annoying.

[ealmloff]

I think this is more of a bug with the docsite. It has an odd iframe setup with a virtual view height which is much taller than the actual view height

[Runtemund]

Hi Evan,

thanks for quick reply. Maybe you are right. Unfortunately I cannot test it on my own in detail. I tried to get the provided code snippet working, which it doesn't 'out of the box'.

I did:

• dx new test_app
• dx components add alert_dialog
• dx components add button
• modified the code to get it work as follows:

use dioxus::prelude::*;
use dioxus_primitives::alert_dialog::*;

pub mod components;
use components::button::Button;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element
{
    const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
    const COMPONENT: Asset = asset!("/assets/dx-components-theme.css");

    let mut open = use_signal(|| false);
    let mut confirmed = use_signal(|| false);

    rsx! {
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
        document::Link { rel: "stylesheet", href: COMPONENT }
        Button {
            r#type: "button",
            "data-style": "outline",
            style: "margin-bottom: 1.5rem;",
            onclick: move |_| open.set(true),
            "Show Alert Dialog"
        }
        AlertDialogRoot { open: open(), on_open_change: move |v| open.set(v),
            AlertDialogContent {
                AlertDialogTitle { "Delete item" }
                AlertDialogDescription { "Are you sure you want to delete this item? This action cannot be undone." }
                AlertDialogActions {
                    AlertDialogCancel { "Cancel" }
                    AlertDialogAction { on_click: move |_| confirmed.set(true), "Delete" }
                }
            }
        }
        if confirmed() {
            p { style: "color: var(--contrast-error-color); margin-top: 16px; font-weight: 600;",
                "Item deleted!"
            }
        }
    }
}

• run dx serve
• result:

Propably I missed something, but I don't know what?!

Maybe nice to know:

• Rust 1.92.0
• Dioxus version: 0.7.2

[ealmloff]

tailwind does a global css reset which may mess with some of the component styling. We probably shouldn't be relying on the global css styles for better compatibility

The non-iframe version here seems to work correctly: https://dioxuslabs.github.io/components/component/?name=alert_dialog&

[Runtemund]

Ok, I tried same procedure (with new project) without tailwind

use dioxus::prelude::*;
use dioxus_primitives::alert_dialog::*;

pub mod components;
use components::button::Button;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element
{
    const MAIN_CSS: Asset = asset!("/assets/main.css");
    const COMPONENT: Asset = asset!("/assets/dx-components-theme.css");

    let mut open = use_signal(|| false);
    let mut confirmed = use_signal(|| false);

    rsx! {
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        document::Link { rel: "stylesheet", href: COMPONENT }
        Button {
            r#type: "button",
            "data-style": "outline",
            style: "margin-bottom: 1.5rem;",
            onclick: move |_| open.set(true),
            "Show Alert Dialog"
        }
        AlertDialogRoot { open: open(), on_open_change: move |v| open.set(v),
            AlertDialogContent {
                AlertDialogTitle { "Delete item" }
                AlertDialogDescription { "Are you sure you want to delete this item? This action cannot be undone." }
                AlertDialogActions {
                    AlertDialogCancel { "Cancel" }
                    AlertDialogAction { on_click: move |_| confirmed.set(true), "Delete" }
                }
            }
        }
        if confirmed() {
            p { style: "color: var(--contrast-error-color); margin-top: 16px; font-weight: 600;",
                "Item deleted!"
            }
        }
    }
}

Result:

Something must be wrong with default CSS processing. I didn't changed any CSS.

If I copy manually the content of the style.css which is beside real *.rs files of the components, then the result looks better, but not as in your example page (animation missing, grey background missing: