Grid row height not calculated correctly when set to auto and used with multiple columns of width *
See original GitHub issueDescription
Grid row height not calculated correctly when set to auto and used with multiple columns of width *. The calculated height is not enough, resulting in the contents being clipped.
Steps to Reproduce
Create a grid with a row definition of Auto and at least 2 columns with definitions of *. Place a label into the first column with a long text attribute, and it’s height will not be calculated correctly, resulting in the text being clipped.
(See code below).
<Grid RowDefinitions="Auto" ColumnDefinitions="*,*" >
<Label Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" Text="This is some long text 1. This is some long text 2. This is some long text 3. This is some long text 4. This is some long text 5. This is some long text 6. This is some long text 7. This is some long text 8. This is some long text 9. This is some long text 10. This is some long text 11. This is some long text 12. This is some long text 13. This is some long text 14. END."></Label>
</Grid>
If the grid contains just a single column of width *, then the problem does not occur.
Link to public reproduction project repository
n/a
Version with bug
7.0.100-rc.2.22477.23
Last version that worked well
Unknown
Affected platforms
All
Affected platform versions
All
Did you find any workaround?
No
Relevant log output
None
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Why is my Grid element's height not being calculated ...
Since your row height is neither fixed or a true unit of length – it's set to 1fr – the grid item's percentage...
Read more >Row height is not correct when using autoHeight ...
The easiest way to see that the row height was calculated incorrectly is to look at the vertical scrollbar while clicking on the...
Read more >grid-auto-rows
A row that is 200 pixels tall that s split into three equal columns. Two row tracks that one of them have an...
Read more >JavaScript Data Grid: Row Height
If multiple columns are marked with autoHeight=true then the height of the largest column is used. The example below shows Auto Height. Column...
Read more >grid-template-rows - CSS: Cascading Style Sheets | MDN
The grid-template-rows CSS property defines the line names and track ... and their size will be determined by the grid-auto-rows property.
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 Free
Top 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

I am also seeing weird layout issues with RC2 which did not exist in RC1. “Fill” does not seem to cause children to be sized to their parent properly? Not sure if it’s related, but definitely RC2 significantly broke layout to the point where we will skip RC2 development.
Same here, I needed to set the
RowDefinitiontoAuto, even for Grids with one row. Then it looked like before.