Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WordWrap on labels with padding does not work properly on iOS. #16018

Open
cat0363 opened this issue Jul 6, 2023 · 4 comments · May be fixed by #16136
Open

WordWrap on labels with padding does not work properly on iOS. #16018

cat0363 opened this issue Jul 6, 2023 · 4 comments · May be fixed by #16136
Labels
area-layout StackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenter platform/iOS 🍎 t/bug Something isn't working
Milestone

Comments

@cat0363
Copy link
Contributor

cat0363 commented Jul 6, 2023

Description

To reproduce the problem, the layout is as follows.

<Grid RowDefinitions="44,*" RowSpacing="5">
    <Entry x:Name="txtTest" Grid.Row="0" TextChanged="txtTest_TextChanged"  />
    <Label x:Name="lblTest" Grid.Row="1" LineBreakMode="WordWrap" FontSize="30" Padding="40,0,40,0" />
</Grid>

The implementation of TextChanged event of Entry is as follows.

private void txtTest_TextChanged(object sender, TextChangedEventArgs e)
{
    lblTest.Text = txtTest.Text;
}

If Padding is set for Label and WordWrap is specified for LineBreakMode, the Text of Label will not be
wrapped by the amount specified for padding.

Below is the execution result.

iPhone.14.iOS.16.4.2023-07-06.15-48-32.mp4

"1234567890ABCDEFG" is displayed, but "HIJKL" after that is not displayed without being wrapped.
It wraps when you type 'M'.

Steps to Reproduce

The steps to reproduce are as follows.

  1. Launch the app uploaded to github with the device on iOS
  2. Enter any text for the entry

When the Label text reaches the end of one line in step 2, the character string entered after
that is not wrapped by the amount specified for padding and is not displayed.

I was expecting the Label's Text to wrap when it reaches the end of a line.

Link to public reproduction project repository

https://github.com/cat0363/Maui-IssueLabel.git

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

Set Margin instead of Padding for Label.

Relevant log output

No response

@cat0363 cat0363 added the t/bug Something isn't working label Jul 6, 2023
@jfversluis jfversluis added the area-layout StackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenter label Jul 6, 2023
@cat0363
Copy link
Contributor Author

cat0363 commented Jul 11, 2023

As far as I know, this issue also occurs in Xamarin.Forms and is still an open issue.
Should I stop using Padding and use Margin instead?

@cat0363
Copy link
Contributor Author

cat0363 commented Jul 13, 2023

By fixing the implementation of MauiLabel, WordWrap now works as intended in the case of adding padding.

[src\Core\src\Platform\iOS\MauiLabel.cs]

The following is the verification result of the fixed version. This is the verification result for the layout
posted in this issue.

iPhone.14.iOS.16.4.2023-07-13.10-28-49.mp4

The character string is wrapped and displayed without disappearing near the display width.

I then tested it with the following layout.

<Grid RowDefinitions="44,160,*" ColumnDefinitions="*,*" RowSpacing="5">
    <Entry x:Name="txtTest" Grid.Row="0" TextChanged="txtTest_TextChanged"  />
    <Grid Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="Red" Padding="0,0,0,0" />
    <Label x:Name="lblTest" Grid.Row="1" LineBreakMode="WordWrap" FontSize="30" Padding="20,20,20,20" TextColor="White" VerticalOptions="Start" VerticalTextAlignment="Start" BackgroundColor="Blue" />
</Grid>

LineBreakMode="WordWrap" VerticalOptions="Start" VeticalTextAlignment="Start"

iPhone.14.iOS.16.4.2023-07-13.10-43-27.mp4

LineBreakMode="WordWrap" VerticalOptions="Center" VeticalTextAlignment="Start"

iPhone.14.iOS.16.4.2023-07-13.10-45-39.mp4

LineBreakMode="WordWrap" VerticalOptions="End" VeticalTextAlignment="Start"

iPhone.14.iOS.16.4.2023-07-13.10-48-30.mp4

LineBreakMode="WordWrap" VerticalOptions="Start" VeticalTextAlignment="Center"

iPhone.14.iOS.16.4.2023-07-13.10-50-30.mp4

LineBreakMode="WordWrap" VerticalOptions="Start" VeticalTextAlignment="End"

iPhone.14.iOS.16.4.2023-07-13.10-51-29.mp4

LineBreakMode="WordWrap" VerticalOptions="Center" VeticalTextAlignment="Center"

iPhone.14.iOS.16.4.2023-07-13.10-53-05.mp4

LineBreakMode="WordWrap" VerticalOptions="Center" VeticalTextAlignment="End"

iPhone.14.iOS.16.4.2023-07-13.10-53-59.mp4

LineBreakMode="WordWrap" VerticalOptions="End" VeticalTextAlignment="Center"

iPhone.14.iOS.16.4.2023-07-13.10-58-18.mp4

LineBreakMode="WordWrap" VerticalOptions="End" VeticalTextAlignment="End"

iPhone.14.iOS.16.4.2023-07-13.10-59-26.mp4

At least the above test results match my expectations.
I would like to verify it in various cases and if there is no problem, I would like to create a PR.

@samhouts samhouts added this to the Under Consideration milestone Aug 15, 2023
@NishiokaTakeo
Copy link

Label in MAUI still does not work. It works only if you wrap label by Grid instead of StackLayout.

@EvoZ1310
Copy link

This is also happening on MacCatalyst!

@PureWeen PureWeen modified the milestones: Under Consideration, Backlog Aug 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-layout StackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenter platform/iOS 🍎 t/bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants