Setting size of listitem in gridview

Is there a way to set the size of listitem in a GtkGridView?

The size does not seem to depend on the size request of the widget that is added to it with gtk_list_item_set_child().

See attached image: the selected area is too large with respect to the child widget (a vbox with image and label).
Sin nombre

1 Like

I more or less figured the GtkGridView layout, so here it is.

You cannot set the size of the GtkListItemWidget (GLIW); it will be set automatically with its own internal rules, of which at least the following apply in 4.14.4:

  1. All boxes in the GLIW child widget and descendants will have top/bottom/start/end (depending if horizontal or vertical box) margins set to 20 pixels.
  2. All other widgets will have top/bottom/start/end (depending if parent is horizontal or vertical box) margins set to 8 pixels.
    The above is not currently configurable.

So to reduce the excess size of the GLIW, minimize the amount of boxes. Compare the previous image which has 3 boxes to the following with only 1 box:
Sin nombre2

The removal of 2 horizontal boxes allows for viewing 4 rows instead of the previous 2 1/2.

But the number of columns is the same, that takes us to the next rule:
3. The width and height of all GLIWs will be set to the dimensions of the largest child of all GLIWs (plus margins).

The reason only 4 columns are shown can be seen by scrolling down and noticing there are wider label widgets:

Sin nombre3

Hope this helps anyone else with similar doubts. And if you have any observations or corrections, please do.

Hi,

Should not be the case…
I suspect some custom theme that forces padding/margins in the sub-widgets.

You can use the inspector to check CSS properties.

Thank you for the pointer. Will follow up tomorrow.

1 Like

The inspector is a great tool: it is clear that the “internal rules” are being set by the theme. Default-light (gtk/theme/Default/Default-light.css).

This theme sets margins top, bottom, left and right to 12 Px for vertical and horizontal boxes inside GtkListItemWidgets.

So the margins are indeed configurable. In order to have a consistent layout across themes, you may override the css for all boxes that go into the GtkListItemWidget. This can be done with:

GtkCssProvider *css_provider = gtk_css_provider_new();
char *data = g_strdup(
    "\
    .gridviewBox {\
      margin-bottom: 0;\
      margin-left: 0;\
      margin-right: 0;\
      margin-top: 0;\
    }\
    ");
gtk_css_provider_load_from_string (css_provider, data);
g_free(data);
gtk_style_context_add_provider_for_display(gdk_display_get_default(),
        GTK_STYLE_PROVIDER(css_provider),
        GTK_STYLE_PROVIDER_PRIORITY_USER); 

And then for each box you add into the GtkListItemWidget:

        gtk_widget_add_css_class(box, "gridviewBox");

With that, the previous layouts become:
Sin nombre4
:smiley:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.