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.

NumberBox has a top padding which breaks alignment

See original GitHub issue

Describe the bug NumberBox has a top padding which breaks alignment.

Steps to reproduce the bug Steps to reproduce the behavior:

Add this XAML (I removed the data bindings since not relevant)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="250"/>
        <ColumnDefinition Width="70"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>

    <TimePicker Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
    <winUI:NumberBox Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalContentAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0" Margin="0,0,0,0"/>
    <TextBlock Grid.Row="0" Grid.Column="2" VerticalAlignment="Center" Margin="10,0,10,0" />
    <Button Grid.Row="0" Grid.Column="3" />
</Grid>

Observe

Expected behavior NumberBox has all padding 0 and doesn’t break Center alignment

Screenshots Everyone is aligned, besides that smart-guy… problem1

Space at the top, both with default margin / padding and with margin/padding set to 0 problem2

Version Info

NuGet package version: Microsoft.UI.Xaml 2.3.200213001

Windows 10 version	Saw the problem?
November 2019 Update (18363)	Yes
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Mobile	Very funny
Xbox
Surface Hub
IoT

Additional context

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

ranjeshjcommented, Apr 10, 2020

@ccornici You can use the pre-release builds as @chingucoding mentioned above. We do the stable release builds about once a quarter and we are trying to get 2.4 stable out by the end of this month (Thank you for your patience). All the features that will be in the next stable release are already in the pre-release so you can give that a try. We are working on a handful of stability fixes now.

0reactions

chingucodingcommented, Apr 10, 2020

As to when 2.4 is being released, I can’t give you an definite answer, I suspect maybe in the next 1-3 months, but @ranjeshj definitely knows it better then me.

Usually the pre releases also include features that are still under preview and might change later. As long as you don’t rely on them I think it’s fine to use them (note that I am not a Microsoft employee and this is just my opinion here).

If you don’t want to use the pre releases, you can also set the TextBoxTopHeaderMargin to 0 since this is the root cause of this margin.

Top Results From Across the Web

How to I modify the internal margins (padding) of a UWP ...

1 Answer 1 · Open the Document Outline pane, find you NumberBox control and right-click it. Choose the option Edit Template > Edit...

The box model - Learn web development | MDN

The box will not break onto a new line. The width and height properties will not apply. Top and bottom padding, margins, and...

Alignment, margin, and padding for layout - Windows apps

Use alignment, margin, and padding properties to arrange the layout of elements on a page.

CSS box-sizing property

Definition and Usage. The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders,...

Customizing the Style of Individual Form Fields

Learn how to style individual fields on your forms.