[Bug] TextCenterVertical() not center vertically within Grid
See original GitHub issueDescription
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
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:
- Created a year ago
- Comments:8 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
thanks for make MAUI Markup Great. thanks for all team to support this library
To add a little more context it looks like the
Label
control in .NET MAUI no longer explicitly uses theTextAlignmentElement.VerticalTextAlignmentProperty
->https://github.com/dotnet/maui/blob/0bb81e205595dba1d692a9820f957cedf54c0fdb/src/Controls/src/Core/Label.cs#L20