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

fix: avoid word wrapping for single word settings values #64

Merged
merged 1 commit into from
Jan 17, 2022

Conversation

Ldoppea
Copy link
Member

@Ldoppea Ldoppea commented Dec 10, 2021

When a setting label is single line and its setting value is single line, everything is displayed correctly

When a setting label is multi line and its value is single word, then
the value may not succeed to require enough space and so it may wrap in
the middle of the word and it becomes multi line

When a setting label is multi line and its value is multi words, then
the value succeed to require enough space to be displayed correctly

With MinimumWidthRequest=100 and LineBreakMode=WordWrap, all three
previous cases are displayed correctly without excessive wrapping


⚠️ this solution is a hack more than a real solution. Hopefully the MinimumWidthRequest does not force the label to have a width of 100 if it is smaller. Sadly I don't really understand why this work 🙃

It has been tested on Android and iOS and in French and English


Examples (left = previous, right = new, background colors are here to vizualise layout space)

image image
image image
image image


English version is not impacted as it has very concise texts

image image

When a setting label is single line and its setting value is single
line, everything is displayed correctly

When a setting label is multi line and its value is single word, then
the value may not succeed to require enough space and so it may wrap in
the middle of the word and it becomes multi line

When a setting label is multi line and its value is multi words, then
the value succeed to require enough space to be displayed correctly

With `MinimumWidthRequest=100` and `LineBreakMode=WordWrap`, all three
previous cases are displayed correctly without excessive wrapping
@Ldoppea
Copy link
Member Author

Ldoppea commented Dec 10, 2021

Note that the following solutions has been tested:

  • Using a grid instead of a StackLayout -> same behaviour (or even worse)
  • Setting wordwrap only -> no effect
  • Removing wordwrap -> long options like Au démarrage de l'application are now single line and break the UI
  • Setting margins instead of paddings (paddings are part of the problem) -> no acceptable effect

@Ldoppea Ldoppea merged commit a824d12 into master Jan 17, 2022
@delete-merged-branch delete-merged-branch bot deleted the fix/settings_word_wrap branch January 17, 2022 19:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants