Panel Auto truncating content
-
Problem
One of the most commonly used panel types in GoJS is the
Auto
panel. It adjusts its size according to the content.
Adding go.Shape as first element to an Auto panel will result in the shape being used as a background for other elements added to the panel after it.
Depending on the shape’s figure we use for the background, by setting thefigure
property, it changed the properties responsible for panel Auto positioning. These properties arespot1
andspot2
, whose default values are the top left corner forspot1
and bottom right corner forspot2
.
An example of shape that would change these properties isRoundedRectangle
, where thespot1
andspot2
properties will be compensated by the valueparameter1 * 0.3
whereparameter1
is equal to the border radius of theRoundedRectangle
shape. This behaviour prevents content from extending beyond the shape's outline.
Unfortunately, this leads to the situation of cutting of the content of the Auto panel, which tries to use all its space (responsiveness).Example
Let’s look at the example of such behaviour.
A panel of type Auto with the light blue, rounded at the top, rectangle background, and inside a panel of type Table, with stretch set togo.Stretch.Horizontal
, positioning the text. The Auto panel is placed inside a GoJS Node withdesiredSize
property defined.
At the picture above we can see a red parent Auto panel, blue background shape and a TextBlock with yellow background inside a Table panel.
Since we set stretch togo.Stretch.Horizontal
in order to stretch the Table panel to always use the entire available width of the parent panel we encounter a situation where our text is cut off.
And without extra background colours:
This is because the Table panel will have the same width as the parent panel (Auto), which in turn has compensatedspot1
andspot2
properties by which the extended content of the Table panel will be truncated.Solution
In order to fix this problem, we need to override the values of the properties responsible for content positioning in the Auto panel. In the properties of the panels background shape (
go.Shape
) we set values forspot1
andspot2
as follows:spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight,
The result will be as follows:
As we can see, the text is no longer cut off, however it sticks out beyond the rounded corners of the panels Auto background shape. Because of the settingspot1
andspot2
properties back to uncompensated values, we have to take care of the correct positioning of the panel content ourselves so that it does not stick out beyond the parent panel. To do this, we can use margins. We add a margin with the valuenew go.Margin(0, 10)
to the Table panel to achieve the following result.
This way we fixed the truncated text, and our Table panel is still responsive without the need to calculate its width manually