In Section reports, when you set the CanGrow or CanShrink property of a TextBox, Label, or section to True, its height adjusts automatically according to the amount of data.

Plus, when the CanGrow property adjusts the height of a control, the Top property of any control below it adjusts automatically. This works great when controls are laid out in nice neat rows and columns with no overlap.
Tip: When you are trying to work through layout issues, temporarily adding a background color to controls or sections helps to clarify what is happening at run time.

With a simple configuration of two textboxes, one over the other, CanGrow allows the first control to grow vertically and moves the second control down below it.

In real life, our reports aren't always in nice neat rows and columns. Sometimes we have other controls adjacent to the CanGrow item, and sometimes they are larger.

Take a look at the image below. As before, txtNotes1 expands to accommodate all of the data because of the CanGrow property setting of true. But this time, because the picture control to the left has its Top edge above txtTitle1, and its Bottom edge below txtTitle1, the title is locked into its position relative to Picture1.

This would be nice if we wanted the employee title to always be next to the image, but we don't want it overlapping the content of our notes!

CanGrow can cause a mess when an adjacent control has a top at or above the CanGrow text box, and a bottom below the top of the lower text box.

Obviously this isn't desirable behavior, so I'll explain how this happens, and how you can avoid it.

Important:

  • Control heights and locations are set after the Format event of the section finishes, but before the BeforePrint event executes.

  • If the Visible property of a control is set to false, its height is not adjusted when the Format event finishes.


When the following conditions coincide:

  • the top of a control (Picture1 in the image) is above
    the bottom of a CanGrow=True control (txtNotes1)

  • the bottom of the control (Picture1) is below
    the top of a control (txtTitle1) whose location is affected by
    the CanGrow=True control (txtNotes1)


The position of txtTitle1 relative to Picture1 takes priority and is kept intact. The same rule applies when any control meets the conditions above, whether it is a large TextBox control, or a Line control placed vertically in a section to render from top to bottom.

When you place controls adjacent to CanGrow=True controls as in our messy image above, you can modify the vertical relation of txtTitle1 by setting the adjacent control (Picture1) to invisible. To do so, in the section where the control in question is located, set Visible property of the control to false in the Format event, and set it back to true in the BeforePrint event. The sample code for our Script tab looks like this (or you can use similar code in the code behind the report):

// C# script

public void Detail_Format()
{
this.Picture1.Visible = false;
}

public void Detail_BeforePrint()
{
this.Picture1.Visible = true;
}


' VB.NET script

Sub Detail_Format
me.Picture1.Visible = false
End Sub

Sub Detail_BeforePrint
me.Picture1.Visible = true
End Sub


Voila! Because Section reports only adjust the height of controls whose Visible property is set to true when the Format event finishes, the picture control is not considered until the other controls are already set.

Script sets the picture's Visible property to false in the format event, then back to true in the BeforePrint event, which fixes the overlap issue.

For more information about the CanGrow and CanShrink properties, please see the following links to our User Guide and a recent blog article.

TextBox (In Section Reports) | Shrink Text to Fit in a Control | Is there a way to automatically resize fonts to fit text within a control?