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.

Broken text wrapping in grid column

See original GitHub issue
  <Grid ColumnDefinitions="*, *">
    <TextBlock Grid.Column="1"
               VerticalAlignment="Center"
               Text="He determined to drop his litigation with the monastry, and relinguish his claims to the wood-cuting and fishery rihgts at once. He was the more ready to do this becuase the rights had becom much less valuable, and he had indeed the vaguest idea where the wood and river in quedtion were."
               TextWrapping="Wrap"/>
  </Grid>

default

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
grokyscommented, Jan 23, 2019

This appears to be caused by Grid caching the measurement of the child control, and applying that cache to subsequent measurements of a different size:

https://github.com/AvaloniaUI/Avalonia/blob/65234e8e43cdbff29791caecf224cbb4b05062be/src/Avalonia.Controls/Grid.cs#L317

1reaction
Gillibaldcommented, Nov 24, 2018

My window has a size of (1920,1080) and the Grid tells the TextBox it has available space of (960,16) but the text layout has a height of 32 so one line is cut off. Somehow when you use VerticalAlignment=“Center” the FormattedText doesn’t get enough space. When VerticalAlignment=“Stretch” is used everything works fine.

Update:

Okay, it seems that this cache has an old value. https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Grid.cs#L315

When I debugged this I realized that the FormattedText is constructed twice. The first time the available space is infinity and the second time and old value of the cache.

Removing the caching fixes the issue. Every time a window is resized or shown the layout is calculated twice. The first time the grid passes the whole available space without column calculations and the second time with column calculations but with outdated cached desired size. The second layout pass should only be cached not the first one.

Read more comments on GitHub >

github_iconTop Results From Across the Web

word-wrap not working in a CSS Grid item
I have a paragraph text without line breaks. It is supposed to be wrapped to a new line if the width exceeds the...
Read more >
Wrap text and elements in Grid box - HTML-CSS
Hi there, I need help with styling CSS Grid. I have this outcome for this page section: Pay attention to how text is...
Read more >
Help with CSS Grid - Text not wrapping inside grid?
I've been able to make the rows/columns responsive to browser width, however, the text inside the grid seems to overlap in on itself...
Read more >
Wrapping and breaking text - CSS: Cascading Style Sheets
Wrapping and breaking text. This guide explains the various ways in which overflowing text can be managed in CSS.
Read more >
Text Wrapping in ag-Grid Column Headers & Cells
Today I'll show you how to implement one of the most sought-after features with the grid: automatically wrapping text in both column headers ......
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