Bug when using a prefab with 'Expand to parent' in conjunction with ListView/ItemView

[coolfarmer]

So we are currently following the sample menu you created (Toon/Sci-fi), and it's working quite well. However, we encountered an issue where only two tabs were displayed in the menu. After a lot of debugging, we found that the prefab (e.g., SettingsTab_Toon) cannot have a size set to 'Expand to parent.'

Enabling 'Expand to parent' causes Nova to only display two tabs, even if you have more in your collection of scriptable objects. We are using this option because we want our tabs to be dynamic. Due to localization requirements, we prefer not to have fixed tab sizes.

This is the result when using a prefab with a fixed size:

And the result with a prefab having the 'Expand to parent' option enabled:

We are uncertain whether this issue is a true bug or an intended behavior.
Do you have any suggestions on how to resolve this?

If you need more information or detail, don't hesitate!
Thanks!

[mchamplain]

My thinking is that the issue comes from the fact that the ListView's visual representation of a given data collection is virtualized,
so it's loading the first item, which takes all the space because of the expand,
then the second item probably to have some kind of buffer or because the expand comes after the check for the available space left?
then there's no visible room left for the other items...

feels like it's a situation where we should be able to force a listview to load and display ALL items?

[adgray1]

@mchamplain is right on the nose :)

Due to the virtualized nature of the List View and its optimizations to handle virtualized scrolling, using Expand on list items along the List View's Auto Layout axis will cause problems when determining how many items can fit into view and can generally be considered "unsupported" - similar to how Auto Space on the List View's Auto Layout is not supported. Though our documentation could benefit from a note mentioning this limitation explicitly!

That said, you have a few options to handle the scenario you're describing:

1. If you set the TextBlocks which render the localized text to Shrink on X and then also set all ancestor UI Blocks up to the list item root to also Shrink on X, then the list items will resize relative to the rendered text size without using Expand - you can add padding/margins somewhere in that hierarchy if you want some extra space between the text and background bounds. See here for visual reference.
2. If you don't need functionality provided by the List View besides the initial binding, you can remove the List View component entirely and implement a simple data binding manually (using your screenshot in Discord as a reference):

[SerializeField]
private ItemView tabPrefab = null;

[SerializeField]
private UIBlock tabBar = null;

[SerializeField]
private List<SettingsCollectionSo> settingsCollectionSo = null;

private Dictionary<ItemView, int> tabs = new Dictionary<ItemView, int>();

...
 
private void Start()
{
    for (int i = 0; i < settingsCollectionSo.Count; ++i)
    {
        ItemView tab = Instantiate(tabPrefab);
        tab.transform.parent = tabBar.transform;
        
        // You'll need to slightly modify your BindTab method signature for this to compile
        BindTab(settingsCollectionSo[i], tab.Visuals as TabButtonVisuals);
        
        // Save tab->index mapping for lookups later
        tabs[tab] = i;
    }
}

...

// slight changes here
private void HandleTabClicked(Gesture.OnClick evt, TabButtonVisuals target)
{
    int index = tabs[target.View];
    
    // the rest unchanged
    ...
}

Other than that you should only have to remove tabBar.AddDataBinder... from your OnEnable() implementation - and anywhere you need to get the index into the data source of a specific tab, e.g. in your OnClick event handler, you can do a lookup in the tabs dictionary to get the tab index (you can get the containing ItemView off any ItemVisuals derived type though the itemVisuals.View property).

If you go with option (2), you can use your existing Expand configuration on the list items!

[coolfarmer]

Once again, thank you for this. I chose option 2, and it works perfectly! 💯