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.

Sign up for GitHub

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

Jump to bottom

[WinUI] LineHeight behavior is different from HTML&CSS behavior #21705

Open
MartyIX opened this issue Apr 8, 2024 · 5 comments
Open

[WinUI] LineHeight behavior is different from HTML&CSS behavior #21705

MartyIX opened this issue Apr 8, 2024 · 5 comments
Labels
area-controls-label Label, Span platform/windows 🪟 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone
Backlog

Comments

@MartyIX
Copy link
Collaborator

MartyIX commented Apr 8, 2024 •
edited
Loading

Description

I tried to set LineHeight property to a Label and the Label's text is not vertically centered as it happens when rendered in a web browser.

Steps to Reproduce

  1. Run the sandbox project with this commit MartyIX@ebadf35 (https://github.com/MartyIX/maui/tree/feature/2024-04-08-LineHeight-behavior)

  2. Compare behavior with the following HTML&CSS:

     <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="src/style.css">
   </head>
   <body>
     
     <div class="label1">Hi friend, try change my color!<br>second line</div>
     <div class="label2">Hi friend, try change my color!<br>second line</div>
     <div class="label1">only one line</div>
     <div class="labelNormal">first line<br>second line</div>
     <div class="label3">BEHAVIOR DIFFERENCE</div>
   </body>
 </html>

    &

    body {
  background: #ffffff;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-size: 14px;
  justify-content: center;
  align-items: flex-start;
}

.label1 {
  height: 150px;
  color: blue;
  background-color: lightblue;
  line-height: 40px;
}

.label2 {
  color: green;
  background-color: lightgreen;
  line-height: 40px;
}

.labelNormal {
  height: 150px;
  color: purple;
  background-color: pink;
}

.label3 {
  color: brown;
  background-color: lightgray;
  line-height: 40px;
}

    (For your convenience check it out here: https://playcode.io/1828826)

You should see (the MAUI app on the left and a rendered HTML&CSS on the right):

image

and the label BEHAVIOR DIFFERENCE is (vertically) aligned differently. In my opinion, it's wrong on Windows. There should be more whitespace above the label.

Notes:

Link to public reproduction project repository

https://github.com/MartyIX/maui/tree/feature/2024-04-08-LineHeight-behavior

Version with bug

8.0.14 SR3.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows 10, Windows 11

Did you find any workaround?

No.

Relevant log output

No response
@MartyIX MartyIX added t/bug Something isn't working platform/windows 🪟 labels Apr 8, 2024
@MartyIX
Copy link
Collaborator Author

MartyIX commented Apr 8, 2024

Given #17741, perhaps @hansmbakker could comment on if this issue is also an issue on android or if his expectation is different.

@MartyIX
Copy link
Collaborator Author

MartyIX commented Apr 8, 2024

This is how it looks like on MacCatalyst:

image

Notice that BEHAVIOR DIFFERENCE is aligned to the bottom on. On Windows, it's exactly the opposite (it's aligned to the top).

@MartyIX
Copy link
Collaborator Author

MartyIX commented Apr 9, 2024

cc @kubaflo if you have an opinion on this issue given that you did work on #20352

@kevinxufei
Copy link
Collaborator

Can repro this issue at Windows platform on the latest 17.10.0 Preview 3(8.0.10/8.0.20) with sample project.

@kevinxufei kevinxufei added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Apr 10, 2024
@MartyIX MartyIX mentioned this issue Apr 11, 2024
Open
@MartyIX
Copy link
Collaborator Author

MartyIX commented Apr 14, 2024 •
edited
Loading

I filed microsoft/microsoft-ui-xaml#9528 where I show how various properties behaves on WinUI. MAUI could potentially work around it though.

This was referenced May 3, 2024
Closed
Closed
@PureWeen PureWeen added the legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor label May 7, 2024
@Eilon Eilon added area-controls-label Label, Span and removed legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor labels May 11, 2024
@jsuarezruiz jsuarezruiz added this to the Backlog milestone Jun 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-controls-label Label, Span platform/windows 🪟 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
5 participants
@Eilon @MartyIX @PureWeen @jsuarezruiz @kevinxufei