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.

Grid layout issues with elements bigger than constraint size

See original GitHub issue

After updating to newer Avalonia that has WPF Grid integrated some controls in my app started shifting content in a weird way. In the beginning I thought this may be how WPF Grid works, but same XAML works just fine in WPF (also this XAML can just be pasted into WPF or Avalonia, as it works in both).

<Grid Width="120" Height="120">

        <Border BorderBrush="#292e34" BorderThickness="1" Background="#494B4D" Margin="2">

            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <DockPanel Grid.Row="0">

                    <Border>
                        <Border.Background>
                            <SolidColorBrush Color="Red" />
                        </Border.Background>
                        <Rectangle Width="16" Height="16" Fill="Blue" />
                    </Border>
                </DockPanel>

                <Rectangle Grid.Row="1" Height="1" Fill="#292e34" />

                <Border Grid.Row="2" Background="#494B4D" Padding="2">
                    <TextBlock HorizontalAlignment="Center" Text="Very very very very very very very long text" />
                </Border>

            </Grid>

        </Border>

    </Grid>

Avalonia: image

WPF: image

Any idea what might be going on there? Also if I add MaxWidth="112" to TextBlock it looks the same as WPF.

cc: @jmacato as you ported Grid from WPF

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
jmacatocommented, Jul 18, 2019

@Abdulbaqi-Alshareef that’s a very helpful resource, thanks so much for linking that 😃

0reactions
jmacatocommented, Jul 27, 2019

I also think this would make a good unit test case so perhaps i could write that one later.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Grid Item Expanding Despite Constraints
You need to define an explicit size for the columns: .grid-container { height: 100vh; min-height:600px; display: grid; grid-gap: 0; ...
Read more >
Preventing a Grid Blowout
Grid then looks at the min-content size of the item. If the item has a size (you've given it a width) or has...
Read more >
[Solved]How to make Grid Layout group Cell Size X Auto ...
I want each cell to expand their x size constraint to completely fill the allocated space without any empty space on the sides....
Read more >
Flexible "grid" layout?
The grid layout seems to require a fixed size of each cell, which is undesirable. Obviously a combination of vertical and horizontal groups...
Read more >
Constrained CSS grids without max-width.
Stumbled across a little layout technique while working on my latest redesign. I think it's helpful; maybe you'll think so, too.
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