question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] TextCenterVertical() not center vertically within Grid

See original GitHub issue

Description

if i use TextCenterVertical(), Label is not center vertically (windows, android, i dont have ios so can’t try it), but if i use standard code, the apps runs perfect.

Stack Trace

Link to Reproduction Sample

Steps to Reproduce

`public partial class TestPage : BasePage<TestViewModel> { private enum Baris { Date, Line, Date2, Line2, };

private enum Kolom
{
	Kol1,
	Kol2
}

public TestPage(TestViewModel vm) : base(vm, vm.Title)
{
    Label lblDate1 = new Label().TextCenterVertical().Text("Date"),
        lblLine1 = new Label().TextCenterVertical().Text("Line");

    Label lblDate2 = new Label()
    {
        VerticalTextAlignment = TextAlignment.Center,
    }.Text("Date 2"),
        lblLine2 = new Label()
        {
            VerticalTextAlignment = TextAlignment.Center,
        }.Text("Line 2");

    DatePicker dtpDate1 = new(),
        dtpDate2 = new();

    Entry txtLine1 = new()
    {
        Keyboard = Keyboard.Numeric,
        MaxLength = 11
    },
    txtLine2 = new()
    {
        Keyboard = Keyboard.Numeric,
        MaxLength = 11
    };

    Grid grid = new Grid
    {
        Padding = new(20),
        ColumnSpacing = 20,
        RowSpacing = 20,

        RowDefinitions = Rows.Define(Star, Star, Star, Star),
        ColumnDefinitions = Columns.Define(Stars(.30), Stars(.70)),
    };

    grid.Add(lblDate1, (int)Kolom.Kol1, (int)Baris.Date);
    grid.Add(dtpDate1, (int)Kolom.Kol2, (int)Baris.Date);

    grid.Add(lblLine1, (int)Kolom.Kol1, (int)Baris.Line);
    grid.Add(txtLine1, (int)Kolom.Kol2, (int)Baris.Line);

    grid.Add(lblDate2, (int)Kolom.Kol1, (int)Baris.Date2);
    grid.Add(dtpDate2, (int)Kolom.Kol2, (int)Baris.Date2);

    grid.Add(lblLine2, (int)Kolom.Kol1, (int)Baris.Line2);
    grid.Add(txtLine2, (int)Kolom.Kol2, (int)Baris.Line2);

    ScrollView scrollView = new()
    {
        Content = grid
    };

    Content = scrollView;
}

}`

Expected Behavior

test1

u can see the image, the 2 label above is not center vertically, but 2 label below is center vertically with the Entry Component

Actual Behavior

Basic Information

  • Version with issue:
  • Last known good version:
  • IDE:
  • Platform Target Frameworks:
    • iOS:
    • Android:
    • UWP:
  • Android Support Library Version:
  • Nuget Packages:
  • Affected Devices:

Workaround

Reproduction imagery

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
chandra-arifincommented, Aug 2, 2022

thanks for make MAUI Markup Great. thanks for all team to support this library

1reaction
bijingtoncommented, Aug 2, 2022

To add a little more context it looks like the Label control in .NET MAUI no longer explicitly uses the TextAlignmentElement.VerticalTextAlignmentProperty ->

https://github.com/dotnet/maui/blob/0bb81e205595dba1d692a9820f957cedf54c0fdb/src/Controls/src/Core/Label.cs#L20

public static readonly BindableProperty VerticalTextAlignmentProperty = BindableProperty.Create("VerticalTextAlignment", typeof(TextAlignment), typeof(Label), TextAlignment.Start);
Read more comments on GitHub >

github_iconTop Results From Across the Web

Vertical align inside CSS grid
I would like to have a giant progressbar which is vertically aligned inside a CSS grid. The problem is, vertical alignment inside CSS...
Read more >
Centering and Aligning Items in CSS Grid
All items are vertically centered within their respective grid area (the ones you defined by placing grid items with line numbers). These are ......
Read more >
How to Center the Content in Grid
Use the text-align property with the "center" value to center the content of grid items horizontally. Apply it to the grid container. Example...
Read more >
How do I vertically center text with CSS?
Multiple methods can be used to center text vertically. Using Flexbox. Say you have a <p> tag element containing text in a container...
Read more >
Box alignment in grid layout - CSS: Cascading Style Sheets
Center an item in the area​​ By combining the align and justify properties we can easily center an item inside a grid area....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found