MAUI - Lines of text not being correctly displayed on IOS Emulators

Question

Hi All

I having an issue with Lines of text not being correctly displayed on IOS Emulators.

They display fine on Windows Device and Android emulators:

But for all IOS emulators I get:

The issue occurs on VS Studio for Windows (V 17.4.4) as well as VS for Mac (V 17.5).

Below is an extract of my xaml page extract:

    <RefreshView x:DataType="local:Level2ViewModel" Command="{Binding LoadItemDetailsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <ScrollView VerticalOptions="FillAndExpand"  Padding="7">
            <CollectionView x:Name="ItemsDetailListView" BackgroundColor="{StaticResource PageBckColour}"  
                        ItemsSource="{Binding ItemDets}"   
                        SelectionMode="Single">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout  x:DataType="model:ItemDets">
                            <Label Text="{Binding DetDesc}"  Padding="8"
                            LineBreakMode="WordWrap"    
                            TextColor="{StaticResource DescTxtColour}"  FontFamily="OpenSansRegular"
                            FontSize="{x:OnPlatform Android=13, WinUI=14, iOS=13}"                            
                            FontAttributes="Bold" />
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer 
                                NumberOfTapsRequired="1"
                                Command="{Binding Source={RelativeSource AncestorType={x:Type local:Level2ViewModel}}, Path=ItemTapped}"		
                                CommandParameter="{Binding .}">
                                </TapGestureRecognizer>
                            </StackLayout.GestureRecognizers>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>
    </RefreshView>

Any ideas as how to solve this error would be appreciated.

Thanks

Answer 1

Hello,

The issue that this label text content will exceed the screen length is caused by an error in dynamically allocating the width of the control on iOS for some reason.

There is a problem in Github similar to the situation you are experiencing, please refer to the workaround from CollectionView inside RefreshView causes layout problems on iOS #11440.

In my tests, I modified your code to the following and it wrapped normally:

<RefreshView  >
<ContentView>
<CollectionView x:Name="ItemsDetailListView" BackgroundColor="{StaticResource PageBckColour}"  
                        ItemsSource="{Binding players}"  
                        SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Label Padding="8" Text="{Binding playerName}" HorizontalTextAlignment="Start" VerticalTextAlignment="Center"
                            LineBreakMode="WordWrap"    
                            TextColor="Blue"  FontFamily="OpenSansRegular"
                            FontSize="{x:OnPlatform Android=13, WinUI=14, iOS=13}"                            
                            FontAttributes="Bold" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentView>
</RefreshView>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.