[iOS] CollectionView takes up huge vertical space

[BlagoCuljak]

Description

We are developing MAUI app, and we use CollectionView constantly. However, on iOS, every collection view takes up huge vertical space, just like this. Android looks good.

Here is the sample:
CollectionViewDemos.zip

Steps to Reproduce

Start the app, and click on one view in menu. Android looks fine, iPhone had huge problem with lower number of items in CollectionView.

Version with bug

6.0.408 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15

Did you find any workaround?

None at the moment, you can set MaximumHeight, but it just gets ugly then, and not all items are displayed, and you need to scroll inside that small MaxHeight window.

Relevant log output

No response

[jfversluis]

Please add the repro as a GitHub repository, thank you!

[ghost]

Hi @BlagoCuljak. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[BlagoCuljak]

Please add the repro as a GitHub repository, thank you!

Hi @jfversluis, thanks for your comment, here you will find github repo.
https://github.com/BlagoCuljak/CollectionViewIOSheight

[Adelzu]

I can confirm the issue, present on iOS. Android works well.

[andrijankara]

Can confirm same issue on iOS, Android works OK!

[dhindrik]

I can see the same problem in the horizontal direction. The screenshot is from a mac catalyst app.

[ganeshachary]

Facing same issue with ios, works fine in Android - MAUI ios
My collection view is inside a Frame which is inside a ScrollView.
Any solution or workaround

[PureWeen]

Related #7315

[BaumTom]

I'am also facing the same issue on MAUI for iOS. Is there any chance that this issue will be fixed in the near future?

[EmberLynn]

I am experiencing the exact same issue. I have nested collection views and each of them renders in a huge amount of space (only on iOS).

If anyone has any resources on how to possibly dynamically size the items and the CollectionView itself, I'd love to know because the current "built-in" functionality is completely broken.

[BaumTom]

My workaround so far is to replace the CollectionView with a (Vertical)StackLayout with BindableLayout.ItemsSource. The CollectionView is not usable at all for me.

[EmberLynn]

My workaround so far is to replace the CollectionView with a (Vertical)StackLayout with BindableLayout.ItemsSource. The CollectionView is not usable at all for me.

Thanks for the suggestion. I was also thinking about giving ListView a try, too.

[ThoHensler]

Same issue occurs with CarourselView. But I cannot find a similar workaround as above with tweaking MaximumHeightRequest in OnSizeChanged.

Code to reproduce:
Main ContentPage like this:

<VerticalStackLayout>
        <Label Text="Label1"></Label>
        <CarouselView ItemsSource="{Binding Items}" Loop="false" IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Name}" BackgroundColor="LightGray"></Label>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView x:Name="indicatorView" HorizontalOptions="Center"></IndicatorView>
        <Label Text="Label2"></Label>
    </VerticalStackLayout>

public partial class MainPage : ContentPage
{
    public class Item
    {
        public string Name { get; set; }
    }

    public ObservableCollection<Item> Items { set; get; }

    public MainPage()
	{
        Items = new ObservableCollection<Item>();
        Items.Add(new Item() { Name = "Item1" });
        Items.Add(new Item() { Name = "Item2" });
        Items.Add(new Item() { Name = "Item3" });
        InitializeComponent();
        BindingContext = this;
    }
}

[Syed-RI]

+1 bumped into this one today. :( Same issue on iOS, Android works fine please send halp I just want to create app not fight basic layout issues

[imoulas]

same issue here .net 7

[Syed-RI]

Hurray! When is the next release?

[jadenrogers]

Having ported the app from Xamarin the biggest bug bear has been related to Scrollable Views not sizing correctly and various work arounds. Fix above saved me #9135 (comment)
When is the next service release?

[Syed-RI]

I can confirm #9135 (comment) is a workaround till we have next release

[mwnovaprove]

It indeed is a workaround but it won't work if there's any other control that needs to be expanded below @Syed-RI