Aligning elements in a List Box or Combo Box control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Combo Box control

Overview
The different text alignment methods
Aligning elements with the TAB character
Aligning elements to the right or left
Retrieving elements from a List Box control
Alignment by spaces (available for monospaced fonts only)
Aligning numeric values
Aligning numeric values
Aligning numbers on the decimal separator
Retrieving the content of the List Box control
Alignment in editable Combo Box controls

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Aligning elements in a List Box or Combo Box control

Overview

There are different methods to align the elements in a List Box or Combo Box control:

For text:
- Alignment of elements by TAB. Elements can be aligned to the left or right.
- Alignment by spaces (available for monospaced fonts only).
For the numeric values: Alignment of numbers on the decimal separator.
For editable Combo Box controls.

The different text alignment methods

Aligning elements with the TAB character

To align the elements found in a List Box or Combo Box control, the easiest solution is to use the TAB character.


	// The first element is filled to reserve the size ListAdd(LIST_LIST2, Complète("MALTESE", 8) + TAB + "Corto") ListAdd(LIST_LIST2, "SCROOGE" + TAB + "John") ListAdd(LIST_LIST2, "ANA" + TAB + "Yoko")

With the TAB character, the width of each element is calculated by taking the character "E" as reference. This reference width is then multiplied by the number of characters in each element.

Important: The first call to ListAdd defines the positions of tabs for the entire List Box control and for the other List Box controls in the window. Therefore, as soon as ListAdd is called for the first time, there must be "sufficient space" for the other control elements. For example, if you know that the largest element displayed in the control will contain 20 letters, you can fix the size using Complete.

Aligning elements to the right or left

By default, the text of the elements is aligned to the left. You can also use the TAB character to align the text of the elements to the left.

To align an element to the right, simply use the EOT character (before the text to be displayed in the List Box control).

The elements that use the EOT character will be aligned to the right regardless of the control width.


	// The first element is filled to reserve the size ListAdd(LIST_LIST3, EOT + Complète("MALTESE", 8) + ... TAB + EOT + "Corto") ListAdd(LIST_LIST3, EOT + "SCROOGE" + TAB + EOT + "John") ListAdd(LIST_LIST3, EOT + "ANA" + TAB + EOT + "Yoko")

Retrieving elements from a List Box control

When retrieving an element from a List Box control, the entire line is returned, including the possible EOT and TAB characters.

For example, for the previous List Box control, the function below retrieves the first element:

Line = LIST_List4[1]

The Line variable contains the following text: <EOT>MALTESE <TAB><EOT>Corto

Therefore, any EOT and TAB characters should be extracted.

Alignment by spaces (available for monospaced fonts only)

Using a variable-width font makes alignment difficult in List Box controls containing multiple elements on a single row.

For example, if the List Box control uses the "Arial" font and has two elements, the code below will display the List Box control as follows (non-aligned elements):


	ListAdd(LIST_LIST1, Complète("MALTESE", 8) + "Corto") ListAdd(LIST_LIST1, Complète("SCROOGE", 8) + "John") ListAdd(LIST_LIST1, Complète("ANA", 8) + "Yoko")

Although the first element is set to occupy the space of 8 characters, the second element will not be aligned.

Each character of a proportional font has its own width. Proportional fonts do not allow you to align elements based on spaces.

However, you can use this method with non-proportional fonts such as "Courier".

Aligning numeric values

Both numeric values and text can be aligned using same method (see previous paragraph). However, numeric values can also be aligned on the decimal separator.

Aligning numbers on the decimal separator

To align the numbers on the decimal point, you must combine the use of TAB and EOT characters:

the integer part is aligned to the right.
the decimal part (including the decimal point) is aligned to the left.

As already mentioned, the first call to ListAdd determines the width of the elements. Therefore, you should make sure the first row you add to the control sets enough width for the other elements.


	ListAdd(LIST_LIST4, Complète("FRANCE", 7) + TAB + EOT + ... " 30" + TAB + ",00") ListAdd(LIST_LIST4, "CANADA" + TAB + EOT + "10" + TAB + ",00") ListAdd(LIST_LIST4, "SWITZERLAND" + TAB + EOT + "246")

Retrieving the content of the List Box control

When retrieving an element from a List Box control, the entire line is returned, including the possible EOT and TAB characters.

For example, for the previous control, the function below retrieves the first element of the List Box control:

Line = LIST_List4[1]

The Line variable contains the following text: "France " + TAB + EOT + " 30" + TAB + ",00"

Therefore, any EOT and TAB characters should be extracted.

Alignment in editable Combo Box controls

All the alignment methods presented above are available for the editable and non-editable Combo Box controls.

However, if the EOT and TAB characters are used to align the elements of an editable Combo Box control, the value displayed in the control when selecting the element contains the alignment characters.


	In this case, you must: use a monospaced font (such as "Courier") and align the elements with spaces without using TAB or EOT characters (recommended solution). extract the EOT and TAB characters form the selected element. To do so, write the corresponding process in the "Whenever modifying" event of the control.

In this case, the user won't be able to select an element in the Combo Box control using the keyboard, but only with the mouse.

For a Combo Box control whose elements have been added according to the following format:

ListAdd(LIST_LIST5, text2 + TAB + EOT + "10" + TAB + ",00")

The process for extracting the TAB and EOT characters is as follows:

// -- Selecting a row in the Combo Box control
// Extract the TAB characters
Str is string
Str = MySelf
// "FRANCE"+TAB+eot+30+tab+,00
Col1 is string = ExtractString(Str, 1) // France
Col2 is string = ExtractString(Str, 2) // eot+30
Col3 is string = ExtractString(Str, 3) // ,00
// Extract the EOT character
Col2 = ExtractString(Col2, 2, EOT) //30

MySelf = NoSpace(Col1) + " " + NoSpace(Col2) + NoSpace(Col3)