Layout system in gtk

hi
i have problem understandig layout system in gtk. sometimes i want everthing to big as possible and that i can do with success… but sometimes i want things to be as small as possible and here i fail …im realy struggling with sometimes combining for one things to be as small as possible to put on side with thing i want big. usualy when user resizes its window misschief happens ,as shown in picture below i have header with button but header just continues even if it should stop with button …is there a solid layout guidence anywhere?

Hi @stormfinger, there are some valuable tools that help experimenting with layouts:

  1. Glade (GTK3 only, but works well for some experiments)
  2. Blueprint
  3. Cambalache (which is pretty much a port of Glade to GTK4)

If a widget should be as big as possible, you should set its hexpand / vexpand properties to TRUE and halign / valign properties to GTK_ALIGN_FILL.

gtk_widget_set_hexpand (widget, TRUE);
gtk_widget_set_vexpand (widget, TRUE);
gtk_widget_set_halign (widget, GTK_ALIGN_FILL);
gtk_widget_set_valign (widget, GTK_ALIGN_FILL);

Maybe you want the widget to be as big as possible only in one direction, for example horizontally. Then you can do:

gtk_widget_set_hexpand (widget, TRUE);
gtk_widget_set_halign (widget, GTK_ALIGN_FILL);
gtk_widget_set_vexpand (widget, FALSE);
/* no need to set valign, since vexpand is FALSE... */

(*align has a meaning only when *expand is TRUE, so we don’t have to set valign here!)

You can also experiment with expand TRUE and align one of GTK_ALIGN_CENTER, GTK_ALIGN_START, or GTK_ALIGN_END. This is used to get some space between widgets in a box.

thank you very much

is it possible to fine tune grid as to say which column can be smaller and which column should be wider? i have a grid packed in scroll window …but im not happy that all columns are pretty much same size …and column is not adjusted to widget but to space it has

is it possible to control when container sizes up to space it has or is packed as its containing widget?

Ok, so some columns should enlarge with the window as it becomes larger, while others should show child widgets at natural / default width. For example, the “name” column should enlarge, while the “id” column should be wide as its children.

To achieve that, set hexpand = TRUE and halign = GTK_ALIGN_FILL to widgets that go in former columns, and set hexpand = FALSE to widgets that go in the others.

Actually, since hexpand defaults to FALSE, and since one expanding widget is enough to make the column grow, you can simply set hexpand = TRUE + halign = GTK_ALIGN_FILL on title widgets of ‘wide’ columns. By title widgets I mean the labels in the first row with blue background.

Something like:

static void
add_title_widgets (GtkGrid *grid)
{
  GtkWidget *label;
  int column = 0;

  label = gtk_label_new (NULL); // Odstrani buttons
  gtk_grid_attach (grid, label, column++, 0, 1, 1);

  label = gtk_label_new ("Id");
  gtk_grid_attach (grid, label, column++, 0, 1, 1);

  label = gtk_label_new ("Name");
  gtk_widget_set_hexpand (label, TRUE);
  gtk_widget_set_halign (label, GTK_ALIGN_FILL);
  gtk_grid_attach (grid, label, column++, 0, 1, 1);

  label = gtk_label_new ("ShortCut");
  gtk_grid_attach (grid, label, column++, 0, 1, 1);

  label = gtk_label_new ("Enable");
  gtk_grid_attach (grid, label, column++, 0, 1, 1);

  label = gtk_label_new (NULL); // Save buttons
  gtk_grid_attach (grid, label, column++, 0, 1, 1);
}