Elementary's human interface guidelines specify how dialogs should look:

dialogs in eos

In Valadoc, there is a minimal example on how Gtk.MessageDialog is to be used:

Gtk.MessageDialog msg = new Gtk.MessageDialog (this,
                                               "My message!");

However, when I do this, I get a dialog which doesn't conform to the Look & Feel of Elementary: Its buttons are too large and particularly without spacing. Also, how do I add a color highlight to one of the buttons ?

Here is the result, which I get, though I'm using the dark theme:


As you can see, the buttons are uglily "stacked", i.e. the blue highlight border of the focused button is overlapped by another button on one side.

Question: How do I create a dialog which looks like the one in the guidelines? Is that even possible using Gtk.MessageDialog?

1 Answer 1


I believe you'll need a Granite.MessageDialog. This a sample of how I used it to achieve something similar:

public class Server.Dialog : Granite.MessageDialog {

    public Dialog (Gee.ArrayList<Server.Model> serversList) {
        Object (
            primary_text : "Welcome to Torrential Remote!",
            secondary_text : "Start by connecting to a server.",
            image_icon : GLib.Icon.new_for_string ("application-default-icon"),
            buttons : Gtk.ButtonsType.NONE

        set_modal (true); // forces user interaction
        set_transient_for (null); // sets no parent window
        add_buttons ("Cancel", Gtk.ResponseType.CANCEL, "Save", Gtk.ResponseType.ACCEPT, null);

        Gtk.Grid grid = new Gtk.Grid ();
        grid.set_column_spacing (10);
        grid.set_row_spacing (10);

        Gtk.Entry nameEntry = new Gtk.Entry ();
        nameEntry.set_hexpand (true);
        Gtk.Label nameLabel = new Gtk.Label ("Name:");
        grid.attach(nameLabel, 0, 1, 1, 1);
        grid.attach(nameEntry, 1, 1, 3, 1);

        Gtk.Entry hostEntry = new Gtk.Entry ();
        hostEntry.set_hexpand (true);
        Gtk.Label hostLabel = new Gtk.Label ("Host:");
        grid.attach(hostLabel, 0, 2, 1, 1);
        grid.attach(hostEntry, 1, 2, 3, 1);

        custom_bin.add (grid);

        get_widget_for_response (Gtk.ResponseType.ACCEPT).can_default = true;
        set_default_response (Gtk.ResponseType.ACCEPT);

        int response = run ();
        if (response == Gtk.ResponseType.ACCEPT) {
            string name = nameEntry.text;
            string host = hostEntry.text;
            // Do your logic here

        destroy ();

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.