How can I make sure scrollbars don't overlap content?

Question

When creating scrollable user controls with .NET and WinForms I have repeatedly encountered situations where, for example, a vertical scrollbar pops up, overlapping the control's content, causing a horizontal scrollbar to also be needed. Ideally the content would shrink just a bit to make room for the vertical scrollbar.

My current solution has been to just keep my controls out of the far right 40 pixels or so that the vertical scrollbar will be taking up. Since this is still effectively client space for the control, the horizontal scrollbar still comes up when it gets covered by the vertical scrollbar, even though no controls are being hidden at all. But then at least the user doesn't actually need to use the horizontal scrollbar that comes up.

Is there a better way to make this all work? Some way to keep the unneeded and unwanted scrollbars from showing up at all?

Answer 1

If your controls are inside a panel, try setting the AutoScroll property of the Panel to False. This will hide the scrollbars. I hope this points you in the right direction.

myPanel.AutoScroll = False

Answer 2

You will need your controls to resize slightly to accommodate the width of the vertical scroll bar. One way to achieve this achieved through docking. Rather than just dropping controls on the form, you'll have to play a bit with panels, padding, min/max sizing and docking.

Here is example code you can place behind a blank new Form1. Resize the form, in designer or runtime and you'll see that the horizontal scrollbar is not shown and the fields are not overlapped. I've also given the fields a max width for good measure :

#region Windows Form Designer generated code

 /// <summary>
 /// Required method for Designer support - do not modify
 /// the contents of this method with the code editor.
 /// </summary>
 private void InitializeComponent() {
  this.textBox1 = new System.Windows.Forms.TextBox();
  this.label1 = new System.Windows.Forms.Label();
  this.panel1 = new System.Windows.Forms.Panel();
  this.panel2 = new System.Windows.Forms.Panel();
  this.textBox2 = new System.Windows.Forms.TextBox();
  this.label2 = new System.Windows.Forms.Label();
  this.panel1.SuspendLayout();
  this.panel2.SuspendLayout();
  this.SuspendLayout();
  // 
  // textBox1
  // 
  this.textBox1.Dock = System.Windows.Forms.DockStyle.Top;
  this.textBox1.Location = new System.Drawing.Point(32, 0);
  this.textBox1.MaximumSize = new System.Drawing.Size(250, 0);
  this.textBox1.Name = "textBox1";
  this.textBox1.Size = new System.Drawing.Size(250, 20);
  this.textBox1.TabIndex = 0;
  // 
  // label1
  // 
  this.label1.AutoSize = true;
  this.label1.Dock = System.Windows.Forms.DockStyle.Left;
  this.label1.Location = new System.Drawing.Point(0, 0);
  this.label1.Name = "label1";
  this.label1.Padding = new System.Windows.Forms.Padding(0, 3, 0, 0);
  this.label1.Size = new System.Drawing.Size(32, 16);
  this.label1.TabIndex = 0;
  this.label1.Text = "Field:";
  // 
  // panel1
  // 
  this.panel1.Controls.Add(this.textBox1);
  this.panel1.Controls.Add(this.label1);
  this.panel1.Dock = System.Windows.Forms.DockStyle.Top;
  this.panel1.Location = new System.Drawing.Point(0, 0);
  this.panel1.Name = "panel1";
  this.panel1.Size = new System.Drawing.Size(392, 37);
  this.panel1.TabIndex = 2;
  // 
  // panel2
  // 
  this.panel2.Controls.Add(this.textBox2);
  this.panel2.Controls.Add(this.label2);
  this.panel2.Dock = System.Windows.Forms.DockStyle.Top;
  this.panel2.Location = new System.Drawing.Point(0, 37);
  this.panel2.Name = "panel2";
  this.panel2.Size = new System.Drawing.Size(392, 37);
  this.panel2.TabIndex = 3;
  // 
  // textBox2
  // 
  this.textBox2.Dock = System.Windows.Forms.DockStyle.Top;
  this.textBox2.Location = new System.Drawing.Point(32, 0);
  this.textBox2.MaximumSize = new System.Drawing.Size(250, 0);
  this.textBox2.Name = "textBox2";
  this.textBox2.Size = new System.Drawing.Size(250, 20);
  this.textBox2.TabIndex = 0;
  // 
  // label2
  // 
  this.label2.AutoSize = true;
  this.label2.Dock = System.Windows.Forms.DockStyle.Left;
  this.label2.Location = new System.Drawing.Point(0, 0);
  this.label2.Name = "label2";
  this.label2.Padding = new System.Windows.Forms.Padding(0, 3, 0, 0);
  this.label2.Size = new System.Drawing.Size(32, 16);
  this.label2.TabIndex = 0;
  this.label2.Text = "Field:";
  // 
  // Form1
  // 
  this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
  this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
  this.AutoScroll = true;
  this.ClientSize = new System.Drawing.Size(392, 116);
  this.Controls.Add(this.panel2);
  this.Controls.Add(this.panel1);
  this.Name = "Form1";
  this.Text = "Form1";
  this.panel1.ResumeLayout(false);
  this.panel1.PerformLayout();
  this.panel2.ResumeLayout(false);
  this.panel2.PerformLayout();
  this.ResumeLayout(false);

 }

 #endregion

 private System.Windows.Forms.TextBox textBox1;
 private System.Windows.Forms.Label label1;
 private System.Windows.Forms.Panel panel1;
 private System.Windows.Forms.Panel panel2;
 private System.Windows.Forms.TextBox textBox2;
 private System.Windows.Forms.Label label2;

Answer 3

@Damian Hickey:

I haven't tried the docking solution, but it makes sense. I've experimented with a lot of different layouts in the past to try and make this work, but I'm not sure I tried this one.

I'm probably going to be trying it out today, and if it works for me, I'll accept the answer. =)

Answer 4

@Damian Hickey:

Worked like a charm! Thanks a ton. Can't believe I didn't figure this out myself.