R – How to make sure scrollbars don’t overlap content

netwinforms

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 scroll-bar will be taking up. Since this is still effectively client space for the control, the horizontal scroll-bar still comes up when it gets covered by the vertical scroll-bar, 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?

Best Answer

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;
Related Topic