How can i center the content of a dialog ?

[daviddanielng]

I do not want to center the contents, but the dialog. i.e the container.

rendered with

window.open_dialog(cx, move |dialog, _, _| {})

Here you will see the contents are not centered, i was able to centre it by using use gpui_kit::component::*;, but it is a lot more work.

[Dotoryman]

Use the dialog's content(...) builder and center that container, rather than centering a separate wrapper in each child. DialogContent is a styled flex-column element; the dialog renders it as its body, and it already fills the available width/height.

window.open_dialog(cx, |dialog, _, _| {
    dialog
        .h(px(300.)) // give vertical centering some space to work with
        .content(|content, _, _| {
            content
                .items_center()   // horizontal (flex cross axis)
                .justify_center() // vertical (flex main axis)
                .child("Centered content")
        })
});

If you also use title(...) or footer(...), this centers within the body area, not over the entire dialog including those sections. The ordinary dialog.child(...) path wraps children in a scrollable body instead; content(...) is the easier place to control body layout. See the current DialogContent implementation and dialog rendering.

[daviddanielng]

Thank, but it only centered the items inside the dialog.

see snippet

  window.open_dialog(cx, move |dialog, _, _| {
            let action_entity = action_entity.clone();
            let name = name.clone();

            dialog
                .items_center() // tried this too, didn't work
                .justify_center() // tried this too, didn't work
                .h(px(300.))
                // .title(t!("dialog.delete_title"))
                .content(move |content, _, _| {
                    let action_entity = action_entity.clone();
                    content.items_center()
                    .justify_center()
                        .child(t!("dialog.delete_description", name = name))
                        .child( // should have used footer here
                            div()
                                .h_flex()
                                .justify_end()
                                .gap_2()
                                .child(
                                    Button::new("cancel-delete")
                                        .outline()
                                        .label(t!("label.cancel"))
                                        .on_click(|_, window, cx| {
                                            window.close_dialog(cx);
                                        }),
                                )
                                .child(
                                    Button::new("confirm-delete")
                                        .danger()
                                        .label(t!("label.delete"))
                                        .on_click(move |_, window, cx| {
                                            _ = action_entity.update(cx, |this, cx| {
                                                cx.emit(ProjectInfoEvent::Delete(
                                                    this.path.clone(),
                                                ));

                                                cx.notify();
                                            });
                                            window.close_dialog(cx);
                                        }),
                                ),
                        )
                })
        });

[Dotoryman]

You're right — I misread the question. My previous snippet centers the contents, not the dialog surface. Sorry about that.

In the current Dialog implementation, the surface is already centered horizontally, but its vertical position defaults to one tenth of the viewport height from the top. items_center() / justify_center() on DialogContent cannot move that surface. The public positioning control I can find is dialog.margin_top(...); for a dialog with a known height, you can calculate the desired top offset from the viewport height and pass it there. For a dialog whose height changes with its content, I don't see a built-in “center this dialog vertically” option: that would require measuring the rendered surface or a change to the dialog positioning implementation.

The relevant lines are the let y = self.props.margin_top.unwrap_or(view_size.height / 10.) calculation and the popup position in dialog.rs. So your observation is correct; the earlier content(...) advice doesn't solve it.