[Bug] TabViewItem content on iOS is out of the screen if TabView.TabIndicatorPlacement="Top"

[DeveloperLookBook]

TabViewItem content on iOS is out of the screen if TabView.TabIndicatorPlacement="Top".

To reproduce the issue:

1. Create TabView with TabViewItem.
2. Put some test content inside TabViewItem (any)
3. Set TabView.TabIndicatorPlacement="Top"

Important: Do not position the TabViewItem root container using HorizontalOptions="Center" VerticalOptions="Center".

Expectation: TabViewItem content should be visible on the appropriate Tab.

Actual result: If TabViewItem root container doesn't use HorizontalOptions="Center" VerticalOptions="Center" then content is out of the screen. Looks like TabViewItem has wrong height and width.

[wagenheimer]

It's totally broken on IOS. TabIndicatorPlacement="Bottom" also have this problem.

[sunkerGit]

Any luck? this is impacted to our end as well after upgrading nuget to 2.0.2

[sunkerGit]

I found this issue was not on XCT but on Xamarin Forms 5.0.0.2401, when I'm reverting XF back to 5.0.0.2337 the ios layout issue was not happen

[bijington]

@sunkerGit thank you for sharing that information.

[sunkerGit]

Hi guys,

did anyone have any luck when upgrading Xamarin Forms 5.0.0.2478? and applying the tab view?

the recent we have to update XF 5.0.0.2478 or the latest because another NuGet package is related with it.

When I'm checking the XCT.csproj i found the Xamarin Form PackageReference Include="Xamarin.Forms" Version="5.0.0.2291" is still using the old version.

cc: @jsuarezruiz @bijington

[bijington]

@sunkerGit no we haven't had time to test this. You should be able to update the Xamarin.Forms version in your app without requiring any new version of the toolkit in order to test whether it fixes your issue. Out of interest does that newer version of Xamarin.Forms have any fixes in it that you believe might help this issue?

[sunkerGit]

@sunkerGit no we haven't had time to test this. You should be able to update the Xamarin.Forms version in your app without requiring any new version of the toolkit in order to test whether it fixes your issue. Out of interest does that newer version of Xamarin.Forms have any fixes in it that you believe might help this issue?

I think it should be adjusted from XCT - Tab View, shouldn't it? because when we are applying the newest Xamarin Forms 5.0.0.2478, the layout inside the tab view is still out of the screen for iOS, yesterday when I checked on the xct csproj file it seems the old NuGet package from Xamarin.Forms" Version="5.0.0.2291" can be conflicted with a new NuGet package on our app? why I assume it, because when I'm reverting XF back to 5.0.0.2337 - Tab View layout is fine.

[bijington]

We only update our Xamarin.Forms version if it is really needed otherwise we force others to upgrade their version and this could prevent some people from using the toolkit. That being said our version is only a minimum version and therefore anyone using the toolkit should be able to upgrade their version of XF to anything above 5.0.0.2291 without experiencing any version conflicts.

It sounds like XF 5.0.0.2337 is the best version for you?

[sunkerGit]

We only update our Xamarin.Forms version if it is really needed otherwise we force others to upgrade their version and this could prevent some people from using the toolkit. That being said our version is only a minimum version and therefore anyone using the toolkit should be able to upgrade their version of XF to anything above 5.0.0.2291 without experiencing any version conflicts.

It sounds like XF 5.0.0.2337 is the best version for you?

yes at the moment XF 5.0.0.2337 is currently has no bugs for XCT - Tab View, but we need to upgrade to XF 5.0.0.2478 cause other NuGet is dependent on it and also patch fix for another mobile app issue that related to XF.

when after upgrading XF greater than 5.0.0.2337 or current latest XF 5.0.0.2478, Tab view layout is out of screen. Also for your info, this is only happened on iOS, not Android.

[bijington]

@sunkerGit That sounds like there is a bug in XF in versions later than 5.0.0.2337 (or some behavioural change) which is causing the issue.

I can't quite tell what the issue is exactly from the description. Is it possible to provide some images and a small reproduction to help investigate?

[alvinzjoe]

TabViewItem with content is out of the screen is fixed after updating to latest Xamarin.Forms v5.0.0.2478, and Xamarin.CommunityToolkit v2.0.4. cc @bijington @sunkerGit

[sunkerGit]

ok cool @alvinzjoe, the case can be closed than @DeveloperLookBook ?

[bijington]

@sunkerGit you mentioned earlier that you still see this issue using Xamarin.Forms v5.0.0.2478 though?

[kdgilang]

experiencing the same issue using Xamarin Forms 5.0.0.2515 with Xamarin community toolkit 2.0.5

[sunkerGit]

@sunkerGit you mentioned earlier that you still see this issue using Xamarin.Forms v5.0.0.2478 though?

for XF 2478 the issue is resolved but when we are upgrading to XF 2515 & XCT 2.0.5 the issue for the tab out of the screen is appear again. @bijington

[Rhyno950]

For me the tabview seems to work fine on iOS as long as its not embedded in a complicated grid with multiple auto rows.

For example this works fine:

<Grid RowDefinitions="auto, *">
            <customcontrols:MGHeader Grid.Row="0"/>

            <xct:TabView Grid.Row="1"
                                  IsSwipeEnabled="False"
                                  IsTabStripVisible="False">
                                 <!--Tab View Items-->
             </xct:TabView>
</Grid>

This causes the issue described:

<Grid RowDefinitions="auto, *, auto">
            <customcontrols:MGHeader Grid.Row="0"/>

            <xct:TabView Grid.Row="1"
                                  IsSwipeEnabled="False"
                                  IsTabStripVisible="False">
                                 <!--Tab View Items-->
             </xct:TabView>

            <Grid Grid.Row="2"
                      RowDefinitions="50, auto, 100">
                      .
                      .
                      .
            </Grid>
</Grid>

[matejvlk]

I spent some time with this issue.

I can confirm, that last version combo that works fine is Xamarin.Forms 5.0.0.2478 (sr11) + XCT 2.0.4. Also 5.0.0.2478 (sr11) is the only working XF version with XCT 2.0.4. Newer versions of XCT doesn't work anywhere and i haven't tested older versions of XCT.

This is the commit in XF in version 5.0.0.2478 (sr11) that fixed this issue https://github.com/xamarin/Xamarin.Forms/commit/d22e7d311b84deb8f5dc163906cda349f5662ffb

but in the next version (5.0.0.2515 sr12) they reverted it because it brought other issues: https://github.com/xamarin/Xamarin.Forms/commit/06b95289212ce0bad6c11e3c0f736982b0270a06 https://github.com/xamarin/Xamarin.Forms/pull/15289 there is also an open issue on this topic in XF to fix both scenarios: https://github.com/xamarin/Xamarin.Forms/issues/15470

For me working TabView on iOS has much higher priority than the side effects and I needed to use new version of Xamarin.Forms in order to target Android 13 and publish to Google Play. So i had to fork XF, "fix" the issue myself (that one line in Xamarin.Forms.Platform.iOS/CollectionView/ItemsViewController.cs), build XF, create and use my own Xamarin.Forms NuGet package.

If you are in the same situation, here are some helpful tips:

• your XF NuGet should have the same id=name "Xamarin.Forms" as the official package so other packages that are dependent on XF (CTK, Syncfusion, Mr.Gestures etc.) will use your fixed version and wouldn't bring other copy of XF
• version of your XF NuGet should be higher than official version you are starting with (so other XF packages like Maps, AppLinks etc. will accept your version)
• if you want, there is my fork of currently newest Xamarin.Forms version 5.0.0.2622 (sr16) with the fix: https://github.com/SkeletonSoftware/Xamarin.Forms/tree/5.0.0.2622_fixed
• a also added the created .nupkg NuGet package to this repo: https://github.com/SkeletonSoftware/Xamarin.Forms/blob/5.0.0.2622_fixed/.nuspec/Xamarin.Forms.5.0.0.2623-internally-fixed.nupkg. But it is only for Android, iOS and Tizen (i deleted UWP and macOS as i don't need that and had build errors). You can use it in local NuGet feed or publish it to your private feed on Azure DevOps etc.