Grid layout issues with elements bigger than constraint size
See original GitHub issueAfter 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:
WPF:
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:
- Created 4 years ago
- Comments:7 (7 by maintainers)
Top 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 >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
@Abdulbaqi-Alshareef that’s a very helpful resource, thanks so much for linking that 😃
I also think this would make a good unit test case so perhaps i could write that one later.