FlowLayoutPanel Height bug when using AutoSize

Question

I have a form holding a TableLayout with 1 column and 3 rows that holds 2 FlowLayoutPanels and a Text box. All Rows are AutoSize, and the column is set to Percentage=100%.

Each FlowLayoutPanel holds several TextBoxes. The FlowLayoutPanels are set: LeftToRight, AutoSize=true, GrowAndShrink, Docking=Fill.

The outline is:

Form
    TableLayout (Dock=Fill)
        FlowLayoutPanel(Dock=Fill, AutoSize=True, GrowShrink)
           More controls
        FlowLayoutPanel(Dock=Fill, AutoSize=True, GrowShrink)
           More controls
        TextBox(Dock=Fill, MultiLine=true)

The problem is if I place the FlowLayoutPanel inside a GroupBox which are also set to be AutoSize=true, the FlowLayoutPanel Height are not set correctly and it shows the TextBoxes in 1 line cutting some TextBoxes out of the form.

The outline is:

Form
    TableLayout (Dock=Fill)
        GroupBox (Dock=Fill, AutoSize=True, GrowShrink) 
            FlowLayoutPanel(Dock=Fill, AutoSize=True, GrowShrink)
               More controls
        GroupBox (Dock=Fill, AutoSize=True, GrowShrink) 
            FlowLayoutPanel(Dock=Fill, AutoSize=True, GrowShrink)
               More controls
        TextBox(Dock=Fill, MultiLine=true)

BTW,the same thing happens if I use instead of a GroupBox, a Panel or even a UserControl to hold the FlowLayoutPanel.

BTW 2, this happens even without the TableLayout. I tried placing the GroupBox (with the FlowLayoutPanel) on an AutoSized Form and I get the same behavior.

What I think the problem is that when the FlowLayoutPanel is in another container that is also AutoSized it fails to pass to it's container is preferred size.

What can be done to override this bug??

Please help Thanks, Yoram

---

p.s: I must use the GroupBox to have a nice frame around the TextBoxes.

Answer 1

Had encountered this problem too, and tried to figure out how to easily resolve this. Although the @GertArnold's answer did help, it felt a bit cumbersome, and I searched for another solution.

What I found was that the Flow Panel's autosize logic was working on the 'minimum' requirements, and by adding a blank Panel, of minimum height I was able to force the Flow Panel's width, thus making all other child controls to be visible.

so in the example above the final layout would be:

Form
    TableLayout (Dock=Fill)
        GroupBox (Dock=Fill, AutoSize=True, GrowShrink) 
            FlowLayoutPanel(Dock=Fill, AutoSize=True, GrowShrink)
                Panel(Dock=Fill, Height = 1, MinimumSize = new System.Drawing.Size( Form.ClientSize.Width - TableLayout.Padding.Horizontal, 1))
                More controls
        GroupBox (Dock=Fill, AutoSize=True, GrowShrink) 
            FlowLayoutPanel(Dock=Fill, AutoSize=True, GrowShrink)
                Panel(Dock=Fill, Height = 1, MinimumSize = new System.Drawing.Size( Form.ClientSize.Width - TableLayout.Padding.Horizontal, 1))
                More controls
        TextBox(Dock=Fill, MultiLine=true)

Hope this helps.

Answer 2

As you dock the FlowLayoutPanel in the GroupBox (or other containers), you may as well leave their AutoSize=false. I'm not sure, but this may make the groupbox the 'leading' control when it comes to sizing.

---

Edit (after your comment)

'Leading control' are my words trying to express that groupbox size would determine that of the FLP, it's not some official term. The problem is that docking and autosizing are fighting one another by nature and someone should take, well, control. Which can only be done when docking and autosizing are cut back and by programming the resize events yourself.

After playing around a bit I finally came up with this model:

Form
    TableLayout (Dock=Fill)
        GroupBox () 
            FlowLayoutPanel(Dock=Fill)
               More controls

And the resize event:

private void Form1_Resize(object sender, EventArgs e)
{
    this.SuspendLayout();
    this.groupBox.Width = this.Width - 20;
    this.groupBox.Height = 
        this.flowLayoutPanel.GetPreferredSize(this.groupBox.Size).Height + 20;
    this.ResumeLayout();
}

I hope I understood you well. At least this may point you in the right direction.

Answer 3

Sorry for being late to the party, but I'd like to suggest that you're better off with a simple calculation of the FlowLayoutPanels and its parent's height than using Gert Arnold's answer as his way causes GetPreferredSize() to return a Height equal to "single row" upon deleting a child Control - even if two rows would still be required (at least in my case).

public YodaUserControl
{
  InitializeComponent();
  InitialHeight = parentOfFlp.Height;
}

private int InitialHeight { get; }

private void OnAdded(object sender, ControlEventArgs args)
  => RefreshHeight();

private void OnRemoved(object sender, ControlEventArgs args)
  => RefreshHeight();

private void OnSizeChanged(object sender, EventArgs args)
  => RefreshHeight();

private void RefreshHeight()
{
  if (flpYoda.Controls.Count > 1
      && flpYoda.Controls[0] is Control control)
  {
    parentOfFlpYoda.Height = flpYoda.Height =
      InitialHeight * (int)Math.Ceiling(
        flpYoda.Controls.Count / Math.Floor(
          flpYoda.ClientSize.Width / (double)control.Width));
  }
}

Notes:

• Of course, you have to replace YodaUserControl, parentOfFlpYoda and flpYoda with your corresponding names.
• OnAdded, OnRemoved & OnSizeChanged need to be attached to flpYodas corresponding ControlAdded, ControlRemoved & SizeChanged events.

If you need further assistance, just let me know via a comment.