Svg forces 1-cell rows instead of specified multi-cell rows in GtkFlowBox

[vendillah]

I’m using an .svg resource to visualize a preview in the preferences dialog. The original svg looks like this:

<svg
   width="172mm"
   height="128mm"
   viewBox="0 0 172 128"
   version="1.1"
   ...

By mere luck and experimentation, I discovered that when I change mm to px in the values for width and height (and I don’t modify viewBox), the image takes up only 1 cell in a GtkFlowBox, such that there is room for another cell on the row. If I don’t, the image requires a full row in my GtkFlowBox. Later, I even changed it to 128px, both, and didn’t notice any stretching issues. The ui code remains the same:

<object class="GtkFlowBox" id="flow_box">
    <property name="vexpand">True</property>
    <property name="max-children-per-line">2</property>
    <!-- 2 elements like the one below that behave as expected (2 on one row) if the above picture box child is omitted... -->
    <child>
        <object class="GtkFlowBoxChild">
            <child>
                <object class="GtkPicture">
                    <property name="file">resource:///io/github/MyApp/icons/scalable/actions/test.svg</property>
                    <property name="vexpand">true</property>
                    <property name="width-request">64</property>
                    <property name="height-request">64</property>
                </object>
            </child>
        </object>
    </child>
    <!-- 3 other elements like the one below that behave as expected (2 on one row) if the above picture box child is omitted... -->
    <child><object class="GtkFlowBoxChild"><child><object class="GtkLabel">
            <property name="hexpand">True</property>
            <property name="label">hi</property>
        </object></child></object></child>
</object>

Here is a before and after of the displayed result:

Why am I seeing this behavior? This might be interesting to know, as I am currently assuming this will just automagically center the .svg image as it looks right now.

I thought regardless of having resolved the main problem and potentially not finding an answer, it could be interesting for you to know how unexperienced developers are running into these cases

[gwillems]

Hi,

GtkPicture sometimes does weird things when requesting its size allocation. In general, it doesn’t suit well for being used in lists or grids. I suggest to try using a GtkImage here instead.