Listview item margin

Unity Engine
,
1

Hi, I’m customizing items style in the listview. However, the margin values are not reflected and in the debugger it is always 0. So there is no gap between items. I tried to modify padding as well but no difference. Is there other way to add gap, or maybe it’s a bug?

Sample example:

    private VisualElement MakeListItem()
    {
        VisualElement background = new VisualElement();
        Label label1 = new Label();
        label1.name = "l1";
        label1.AddToClassList("item-label1");
        background.Add(label1);
        Label label2 = new Label();
        label2.name = "l2";
        label2.AddToClassList("item-label2");
        background.Add(label2);
        background.AddToClassList("item-background");
        return background;
    }

.item-background.unity-list-view__item {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 4px;
    margin-top: 4px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left-color: rgb(200, 200, 200);
    border-right-color: rgb(200, 200, 200);
    border-top-color: rgb(200, 200, 200);
    border-bottom-color: rgb(200, 200, 200);
    justify-content: center;
    align-items: flex-start;
}

.item-label1 {
    -unity-text-align: middle-left;
    font-size: 14px;
    -unity-font-style: bold;
    white-space: nowrap;
    color: rgb(64, 64, 64);
}

.item-label2 {
    -unity-text-align: middle-left;
    font-size: 12px;
    white-space: nowrap;
    color: rgb(64, 64, 64);
}
2

Find any fix for this? I am having the same issue…

3

If you are using the ListView.virtualizationMethod = FixedHeight, it’s possible that the padding is not taking effect.
Unfortunately I don’t think margin will work at all in ListView because it builds its own vertical layout, bypassing the layout system for distributing the items vertically.

Using the DynamicHeight mode would likely give better results.

4

“DynamicHeight” mode had the same issues for me. Margin had no effect.

I solved the problem by:

  1. using a fixed item height for the list view (entry height + padding/margin height)
  2. generating a child-VisualElement (within the list view item)
    which then receives the padding and / or margin.

Works fine for me.
Hope it helps you, too.