Forum Xamarin.Forms

Label text sometimes showing only first word on UI

SreeeeSreeee INMember ✭✭✭✭✭

I am using FlowListView for showing multiple items in a row and label to show the content on UI. My problem is label text sometimes showing only a part of the data. There is enough space on the UI, but sometimes it only shows a single word from the data. It is also happening when scrolling. Initially show full content, after scroll down and coming back only the first word of the content is present in the UI.

I have uploaded a sample on here. The first content is Act of Contrition, but sometimes it shows only Act on UI.

Also, there is a problem with the expected UI(Mainly on IOS).

enter image description here

Suggest me solution for these 2 problems.

Thanks in advance.

Best Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited October 2019 Accepted Answer

    Issue 1

    Set FillAndExpand on HorizontalOptions and VerticalOptions of the Label , CenterAndExpand may cut off part of the content .

    Issue 2

    I test on some devices on android and ios ,it has no problem .

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited October 2019 Accepted Answer

    Now I replace the stack layout with a frame and remove the grid layout parts, now the second issue gets resolved. Also set margin for frame layout.

Answers

  • lillianlillian Member ✭✭

    @Sreeee , please have a try modifying your DataTemplate in FlowListView like this:

     <flv:FlowListView 
            FlowColumnCount="2"
            x:Name="CategoryList"
            HasUnevenRows="True">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Grid Margin="10,0,10,10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
    
                        <Image 
                            Grid.Row="0" 
                            HorizontalOptions="FillAndExpand"
                            Source="ic_video_category_bg_xx.png"/>
    
                        <StackLayout
                            Grid.Row="0"
                            Orientation="Horizontal">
    
                            <Label 
                                Text="{Binding title}"
                                FontSize="Large"
                                TextColor="Black"
                                HorizontalOptions="CenterAndExpand" 
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                VerticalOptions="CenterAndExpand"/>
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @lillian I tried your code, but no change happens.

  • ColeXColeX Member, Xamarin Team Xamurai
    edited October 2019 Accepted Answer

    Issue 1

    Set FillAndExpand on HorizontalOptions and VerticalOptions of the Label , CenterAndExpand may cut off part of the content .

    Issue 2

    I test on some devices on android and ios ,it has no problem .

  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX Issue 1 is resolved, thanks :)

    I have tested on iPhone 7(12.4.1). But issue 2 still exists. Also on some android phones have this same issue.

  • ColeXColeX Member, Xamarin Team Xamurai

    Try to set Margin 5 on Grid .

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited October 2019 Accepted Answer

    Now I replace the stack layout with a frame and remove the grid layout parts, now the second issue gets resolved. Also set margin for frame layout.

Sign In or Register to comment.