Question

How do I set the leading spaces in a GtkWidget? as you can see into below imagem, username/password widgets are a bit away from horizontal line when the window begins

My code:

  GtkWidget *window;
  GtkWidget *login_label;
  GtkWidget *username_label, *password_label;
  GtkWidget *username_entry, *password_entry;
  GtkWidget *ok_button;
  GtkWidget *hbox0, *hbox1, *hbox2, *hbox3;
  GtkWidget *vbox;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "hello");
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 200, 300);

  g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);

  login_label    = gtk_label_new("Login");
  username_label = gtk_label_new("Username: ");
  password_label = gtk_label_new("Password: ");
  username_entry = gtk_entry_new();
  password_entry = gtk_entry_new();

  gtk_entry_set_visibility(GTK_ENTRY(password_entry), FALSE);
  ok_button = gtk_button_new_with_label("Enter");

  g_signal_connect(G_OBJECT(ok_button), "clicked", G_CALLBACK(print_username), ok_button);

  hbox0 = gtk_hbox_new(TRUE, 5);
  hbox1 = gtk_hbox_new(TRUE, 5);
  hbox2 = gtk_hbox_new(TRUE, 5);
  hbox3 = gtk_hbox_new(TRUE, 5);

  vbox =  gtk_vbox_new(FALSE, 10);

  gtk_box_pack_start(GTK_BOX(hbox0), login_label, TRUE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(hbox1), username_label, TRUE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(hbox1), username_entry, TRUE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(hbox2), password_label, TRUE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(hbox2), password_entry, TRUE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(hbox3), ok_button, FALSE, FALSE, 5);

  gtk_box_pack_start(GTK_BOX(vbox), hbox0, FALSE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(vbox), hbox1, FALSE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(vbox), hbox2, FALSE, FALSE, 5);
  gtk_box_pack_start(GTK_BOX(vbox), hbox3, FALSE, FALSE, 5);

  gtk_container_add(GTK_CONTAINER(window), vbox);

  gtk_widget_show_all(window);
  gtk_main();

Answer 1

A GtkGrid inside of a GtkDialog is probably more appropriate for the layout you are trying to achieve, however, let me at least help with your code as it is now.

For the packing, I assume you want the GtkLabel widgets to be a fixed width, left-aligned. The GtkEntry widgets would fill up the rest of the horizontal space.

First, you can control the “alignment” of the text within a GtkLabel. Since a GtkLabel is a GtkMisc, you can use that to align the text. The alignment is a fraction where 0.0 is all the way to the left/top and 1.0 all the way to the right/bottom.

username_label = gtk_label_new("Username: ");
password_label = gtk_label_new("Password: ");

/* left align horizontally, center align vertically */
gtk_misc_set_alignment(GTK_MISC(username_label), 0.0, 0.5);
gtk_misc_set_alignment(GTK_MISC(password_label), 0.0, 0.5);

Assuming you are using GTK+ 3, you probably should ditch the deprecated gtk_hbox_new() and gtk_vbox_new() functions in favor of gtk_box_new(). I’ve found there are often unexpected results using those deprecated functions in GTK+ 3.

hbox0 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);
hbox1 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);
hbox2 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);
hbox3 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);
vbox =  gtk_box_new(GTK_ORIENTATION_VERTICAL, 10);

Finally, you can change the packing so that the labels do not expand, but the entries do.

/* login label fills all horiz space */
gtk_box_pack_start(GTK_BOX(hbox0), login_label, TRUE, TRUE, 5);

/* labels do NOT expand, but they will fill the space if it's there */
gtk_box_pack_start(GTK_BOX(hbox1), username_label, FALSE, TRUE, 5);
gtk_box_pack_start(GTK_BOX(hbox2), password_label, FALSE, TRUE, 5);

/* entries expand and fill all remaining space */
gtk_box_pack_start(GTK_BOX(hbox1), username_entry, TRUE, TRUE, 5);
gtk_box_pack_start(GTK_BOX(hbox2), password_entry, TRUE, TRUE, 5);

While it’s a little bit out of date, you may want to read How Packing Effects the Layout from my GTK+ tutorial. By playing with packing properties in Glade you can quickly test your layouts before hard-coding them in C.

Also note that as of GTK+ 3, the "halign", "valign", "hexpand" and "vexpand" are now preferred over the "expand" and "fill" properties.

Edit

Here is a “better” way to do it with a GtkGrid which handles the width-for-height geometry of GTK+ 3 a little better and ensures you have both rows and columns.

First, set the hexpand property of the entry widgets (as opposed to “packing” them into a box with expand):

/* allow entry widgets to expand */
gtk_widget_set_hexpand(username_entry, TRUE);
gtk_widget_set_hexpand(password_entry, TRUE);

Next, attach all of the widgets to a grid. You can span the “login” label and the “ok” button across multiple columns:

grid = gtk_grid_new();

/* 5 pixels between rows and columns */
gtk_grid_set_row_spacing(GTK_GRID(grid), 5);
gtk_grid_set_column_spacing(GTK_GRID(grid), 5);

/* 5 pixels around entire grid */
gtk_container_set_border_width(GTK_CONTAINER(grid), 5);

/* "login" spans 2 columns */
gtk_grid_attach(GTK_GRID(grid), login_label, 0, 0, 2, 1);

gtk_grid_attach(GTK_GRID(grid), username_label, 0, 1, 1, 1);
gtk_grid_attach(GTK_GRID(grid), username_entry, 1, 1, 1, 1);
gtk_grid_attach(GTK_GRID(grid), password_label, 0, 2, 1, 1);
gtk_grid_attach(GTK_GRID(grid), password_entry, 1, 2, 1, 1);

/* "ok" button spans 2 columns */
gtk_grid_attach(GTK_GRID(grid), ok_button, 0, 3, 2, 1);

gtk_container_add(GTK_CONTAINER(window), grid);

The arguments to gtk_grid_attach specify the placement, width, and height (in cells, not pixels) for each widget. Check out the API docs for GtkGrid for details.