C1Ribbon (Classic) Task-Based Help / Lining Up Combo/Edit Boxes on a Group
Lining Up Combo/Edit Boxes on a Group

You can line up text box parts of several combo/edit boxes vertically on a Ribbon group using the RibbonComboBox.RibbonComboBox.GapBeforeTextArea and RibbonTextBox. GapBeforeTextArea properties. This property specifies the gap (in pixels) between the label and text box parts of the element. The maximum allowable value for this property has been set to 80.

To Line up Combo/Edit Boxes on a Group Using the Smart Designer and Properties Window

Complete the following steps:

  1. Select the Ribbon group to enable the group's floating toolbar:
  2. Click the Actions drop-down button. This reveals a list of Ribbon items to add to the group.
  3. Select Add ComboBox and then Add EditBox from the list. This adds each item to the Ribbon group:

    Notice that the text box parts do not line up vertically. The next step shows how to specify the gap between the label and text box parts of the element so that the parts line up.
    Note: Depending on the length of your label, you may need to increase or decrease the size of the gap so that the parts line up vertically.
  4. Select the combo box to activate it and from the Ribbon combo box's Properties window:
  5. Next, select the edit box to activate it and from the Ribbon edit box's Properties window:

To Line up Combo/Edit Boxes on a Group Programmatically

Optionally, you can add the Ribbon combo/edit boxes to the Ribbon group and specify the gap between the label and text box parts of the combo/edit box elements using code.

Add the following code to your project:

To write code in Visual Basic

Visual Basic
Copy Code
' type the Imports directive for the namespace
Imports C1.Win.C1Ribbon
 
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    ' add a RibbonComboBox and RibbonTextBox items
    ' to the Ribbon group
    Dim ComboBox1 As RibbonComboBox = New RibbonComboBox()
    Dim EditBox1 As RibbonTextBox = New RibbonTextBox()
    RibbonGroup1.Items.Add(ComboBox1)
    RibbonGroup1.Items.Add(EditBox1)
 
    ' add a label
    ComboBox1.Label = "Favorites:"
    EditBox1.Label = "Find:"
 
    ' specify the gap between the "label" and "text box"
    ' parts of the combo/edit box elements
    ComboBox1.GapBeforeTextArea = 3
    EditBox1.GapBeforeTextArea = 28
End Sub

To write code in C#

C#
Copy Code
// type the using directive for the namespace
using C1.Win.C1Ribbon;
 
private void Form1_Load(object sender, System.EventArgs e)
{
    // add a RibbonComboBox and RibbonTextBox items
    // to the Ribbon group
    RibbonComboBox ComboBox1 = new RibbonComboBox();
    RibbonTextBox EditBox1   = new RibbonTextBox();
    ribbonGroup1.Items.Add(ComboBox1);
    ribbonGroup1.Items.Add(EditBox1);
 
    // add a label
    ComboBox1.Label = "Favorites:";
    EditBox1.Label = "Find:";
 
    // specify the gap between the "label" and "text box"
    // parts of the combo/edit box elements
    ComboBox1.GapBeforeTextArea = 3;
    EditBox1.GapBeforeTextArea = 28;
}

This topic illustrates the following:

With the GapBeforeTextArea property set for the Ribbon combo box and edit box items, the text box parts line up vertically on the Ribbon group: