Text components overlap when using "Grow to Height" inside a DataBand

[qwqy9723]

I am using Stimulsoft Reports.JS and have encountered an issue with the Grow to Height property when designing a report.

I use the same Data Source and place multiple Text components inside a DataBand. Each row contains labels on the left and corresponding content on the right. Since the content may be long and require multiple lines, I enable Can Grow for the content fields.

However, when Grow to Height is disabled, the left-side labels do not adjust to match the height of the content on the right, resulting in misaligned row heights.

When I enable Grow to Height for the fields, some text components overlap, and the overall layout becomes incorrect.

I expected the components in the same row to adjust their heights correctly based on the content, while keeping the layout aligned and preventing overlapping text.

Based on the results, it seems that there may be an issue with how the component heights are calculated or how the components are repositioned when their heights change.

Is this the expected behavior? Is there a recommended way to configure Can Grow and Grow to Height to achieve this layout?

[Lech Kulikowski]

Hello,

The cause is the layout. The three rows are placed as separate components inside one DataBand. Can Grow only increases a component’s own height and does not move the components below it. Grow to Height stretches a component to the bottom of its container, which here is the whole band, so every component stretches to the band bottom and they overlap.

To get the expected result:
- Put each row (label and content) into its own Panel inside the DataBand. Enable Can Grow on each Panel and on the content Text components, so the Panel grows to the tallest content.
- Enable Grow to Height on the label Text components inside each Panel. They will then stretch to the Panel height, not the band height.
- Set Shift Mode to Always on the Panels (or on the components below) so the next row moves down when the row above grows.
- Place the number cell (Text7) in a separate Panel that spans all three rows, with Grow to Height enabled, so it matches the total height.

Thank you.