Wrap content in table cell containing two TextBlocks

GoJS
1

Hi,

we have a TablePanel with two columns.
The second column should contain two TextBlocks:

  • The first TextBlock with normal text
  • The second TextBlock with a single FontAwesome Icon

Basically the icon should be displayed directly after the “t” of “Raw_Product”

grafik
grafik196×541 12.8 KB

The column can be manually resized by the user and the text (including the icon) should wrap if it doesn’t fit into the column.
For a single TextBlock in the column, this works fine with “WrapDesiredSize”

However for two TextBlocks, I cannot get this to work:

  • If I add both TextBlocks into a horizontal panel, The wrap doesn’t work anymore
  • If I add both TextBlocks into a spot panel, and set the second TextBlock as Spot.CenterRight, the column width doesn’t seem to consider the second TextBlock and cuts it off

Here is an online example to play with:

Can this be solved with goJS? In HTML I would just add a span tag with a different font for the icon, something like this
<p>Raw_Product <span style="font-family: FontAwesome">\u3637<span></p>

2

Not in the manner that you desire. I think you could use a horizontally stretched “Table” Panel. But you wouldn’t get both wrapped text and the separate text/icon immediately after the end of the text within the bounds of the first TextBlock.

HTML is fundamentally 1D, at least as far as text and wrapping is concerned, so it is more natural to support “flowing” text.

3

Okay, thanks!